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

Question

[Полина Емельянова]

Здравствуйте!
После прочтения многих тем и холиваров на тему «уничтожаем 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ительной луковицы из своего кода?

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

С уважением.

Comments

[Eugene]

Йоги и будисты должны стремиться к минимализму, а как же иначе?
nav и внутри три ссылки с display: block, а че, для йогов самое то!

[Полина Емельянова]

blasheevich: так уж поясните? Я растянула ссылки на всю площадь родителя.... Что не так? Лишним были li?

[Eugene]

Полина Емельянова: Всё прекрасно, нет причин для беспокойства, это шутка, просто шутка :)
- теоретически ведь можно, наверно, обойтись блоком-обёрткой и тремя ссылками, и всё, этого будет достаточно, только нафиг это вот надо :)

[Полина Емельянова]

Спасибо.) Я читала, что если ставим nav, то в нем только ссылки, без лишней оболочки... Только в конкретном случае, должно быть нужно будет еще обертку для позиционирования? Или можно все на nav, повесить? Мне просто преподаватели немного черепную коробку промыли...

[trushka]

blasheevich, а нафиг надо лишние элементы, тот же список ещё в nav пихать?))

Answer 1

[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 ставить.. Хотя, в последнем случае могут быть всякие сюрпризы в ойфонах

Answer 2

[Евгений]

Можно так и так.