Задать вопрос
bugo_aneo
@bugo_aneo
Верстальщик по жизни, буддист, кофеман
html

Бритва Оккама: лишние обертки. Как понять нужен ли оборачиающий блок или нет?

Здравствуйте!
После прочтения многих тем и холиваров на тему «уничтожаем DIV-ный суп» и связанных с ними тем по HTML5 и «семантичной верстке», у меня встал вопрос: как не создавать ЛИШНИХ оберток?

Ну, вот пример типичного(?) кода адаптивной меню-выпадашки (увидеть вживую):

<header class="header page__header">
			<div class="contener justify">				
				<div class="header__logo">
					<a href="../index.html" class="logo__link">
						<img src="../img/big-logo.png" class="logo__pic">
						<img src="../img/logo.png" class="logo__pic-small">
					</a>
				</div>			
				<nav class="nav">
				<a href="#" class="toggl-menu"><span></span></a>
					<ul class="nav__list">
						<li class="nav__item">
							<a href="#" class="nav__link">О нас</a>
						</li>
						<li class="nav__item">
							<a href="#" class="nav__link">Абонементы</a>
						</li>
						<li class="nav__item">
							<a href="#" class="nav__link">Контакты</a>
						</li>
					</ul>
				</nav>
			</div>
		</header>


"contener justify" — это хак, для растягивания инлайн-блоков header__logo и nav по всей ширине родителя. А вот нужно ли в nav класть ul, в которых еще и li? Или можно каким-то образом обойтись?

Как опытные коллеги решают вопрос необходимости того или иного оборачивающего блока? Как не делать уDIVительной луковицы из своего кода?

Заранее спасибо что прочитали до конца и за ответы.

С уважением.
  • Вопрос задан
  • 366 просмотров
5 комментариев
Подписаться 2 Оценить 5 комментариев
Пригласить эксперта
Ответы на вопрос 2
trushka
@trushka
Ну, я вот стараюсь всегда максимально упростить (писал в коменте выше, почему), тут бы вполне можно было бы вот так:
<header class="header page__header justify">
          <a href="../index.html" class="header__logo logo__link">
            <img src="../img/big-logo.png" class="logo__pic">
            <img src="../img/logo.png" class="logo__pic-small">
          </a>
      <nav class="nav">
        <button class="toggl-menu"><span></span></button>
        <a href="#" class="nav__link">О нас</a>
        <a href="#" class="nav__link">Абонементы</a>
        <a href="#" class="nav__link">Контакты</a>
      </nav>
</header>
Отступы в header'e можно сделать с помощью padding: 0 20px (а box-sizing: border-box уже и так для всех элементов у вас задан). Вот нащот списков внутри nav вроде довольно много копий уже сломано, но я вот считаю, что nav по определению уже список и можно тупо прямо в него ссылки лепить, без зазрения совести) В общем, как-то так)) А, да, и для раскрытия меню (да ивообще интерактивных элементов, не предполагающих переход по ссылке) лучше кнопку или просто span ставить.. Хотя, в последнем случае могут быть всякие сюрпризы в ойфонах
Ответ написан
Комментировать
Комментировать
iamd503
@iamd503
Верстальщик
Можно так и так.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Расработка Парсер для сайта https://soliq.uz/activities/debtor
19 апр. 2024, в 19:51
3000 руб./за проект
Два скрипта, Python, web3.py, вызов функции смарт-конракта
19 апр. 2024, в 19:47
50000 руб./за проект
Сделать дизайн главной страницы сайта
19 апр. 2024, в 19:17
1500 руб./за проект
Ещё заказы