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

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

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

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

С уважением.
  • Вопрос задан
  • 346 просмотров
Пригласить эксперта
Ответы на вопрос 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
Верстальщик
Можно так и так.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы