Как правильно вкладывать блоки друг в друга при вёрстке?

Question

[Waniman]

Почему например при вёрстке определенного элемента страницы, например header, делают следующую структуру блоков:

<header> 
     <div class='container'>
        
      </div>
   </header>

То есть по-мимо тега header есть еще вложенный блок контейнер. Почему нельзя оставить один header, задать ему ширину и высоту и верстать вложенные в него блоки, зачем обычно делают еще и контейнер или обёртку?

Comments

[Seanyr]

Если вы попробуете это сделать, ответ сам придет.
Контейнер ограничивает ширину основного контента (ну и обычно еще добавляет базовые отступы).
А его родитель нужен чтобы например задать фон для всей ширины блока, а не только контента.
Если у вас контент на всю ширину экрана, то можно обойтись и без контейнера.

Answer 1

[Алекс Глебов]

Хорошим тоном считается отделять сеточные блоки от всех остальных.

Блоки страницы обычно занимают всю ширину экрана и фон у них тянется на всю ширину. А контент ограничен по центру тем самым контейнером.

Если блок не тянется на всю ширину, то уже он находится в контейнере.

<div class='container'>
        <div class='header'>
        
      </div>
      </div>

Совмещать в 1 блок плохо, потому что придется для всех блоков задавать ширину, вместо того чтобы 1 раз задать в контейнере. И не получится спокойно переместить блок в другое место, или добавить другие блоки в тот же контейнер.

Answer 2

[Арсений Матыцин]

Именно это явный кейс из бутстрапа. Притом плохой по своей сути: тег header существует не только для создания шапки, поэтому для определения стилей ему в обязательном порядке необходимо задавать класс. Еще лучше двинуться дальше с методологии типа БЭМ, которые расширяют указанную логику ответа.

И именно он скорее всего нужен, чтобы задать стили шапке вкрая, а вложенный container нужен, чтобы внутри содержимое было упорядочено сетке и логике фреймворке (максимальная ширина и т.д.).

При этом, если у самой шапки нет стилей и она существует только ради того, чтобы указать поисковику, что это шапка, но вести себя она должна, как обычный контейнер, то класс container можно вешать прямо на нее, минуя лишнюю вложенность.

Comments

[Waniman]

Я часто видел такое и без бутстрапа, когда вручную верстают.
Разве нельзя сделать сетку сразу внутри header?

[Andrew]

Чем плох данный кейс?

[Арсений Матыцин]

Andrew, привязкой стилей к тегу. Header это не специальный тег для шапки сайта. Это логический блок, как и footer и т.д.

[Andrew]

Арсений Матыцин, а что мешает не давать стили именно header'у, дать ему класс?

[Арсений Матыцин]

Waniman, если header в точности должен работать, как container, то во вложенной структуре нет необходимости. НО ПОВТОРЮСЬ: если надо сделать оформление шапки вкрая, а внутри вкладывать элементы по структуре bootstrap, а .container ИМЕЕТ ОГРАНИЧЕНИЕ по ширине, то он необходим. И сделать все сразу на уровне header можно только расчетными отступами (идиотизм) или на гридах.

[Арсений Матыцин]

Andrew, что мешает не задать глупые вопросы?

В данном кейсе (примере с описанием задачи) класса нет. Хочешь дополнить ответ, дополни так, чтобы было понятно, о чем ты хочешь внести лепту.

[Waniman]

Арсений Матыцин, в принципе понятно, спасибо

[Арсений Матыцин]

Waniman, этой логикой и должен руководствоваться разработчик. При этом да, если прослойка действительно не нужна, нет стилей и нет привязки жесткой при работе на уровне JS (беготни по parentNode например), то все, что на самом деле лишнее — этому не место в проекте. Оно засоряет эфир, создает лишние узлы при отрисовке, да и в целом ухудшает читаемость.

[Andrew]

Арсений Матыцин, я не про вопрос автора, а про

Именно это явный кейс из бутстрапа. Притом плохой по своей сути.

чего он плохой?
Со второй частью ответа я согласен.

[Andrew]

Арсений Матыцин, если бы мне казалось что ответ не полный, я бы его дополнил, я думал, у вас есть какие-то причины говорить о том что так плохо писать, нет, так нет.

[Арсений Матыцин]

Andrew, эта постановка вопроса лучше. Плохой просто потому что нет класса и понятия наследованности. Мы это выше перетерли. И, пожалуй соглашусь, с неназванным тезисом, да расшифрую.