@Waniman

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

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

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


То есть по-мимо тега header есть еще вложенный блок контейнер. Почему нельзя оставить один header, задать ему ширину и высоту и верстать вложенные в него блоки, зачем обычно делают еще и контейнер или обёртку?
  • Вопрос задан
  • 674 просмотра
Решения вопроса 2
SkiperX
@SkiperX Куратор тега CSS
Хорошим тоном считается отделять сеточные блоки от всех остальных.

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

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

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


Совмещать в 1 блок плохо, потому что придется для всех блоков задавать ширину, вместо того чтобы 1 раз задать в контейнере. И не получится спокойно переместить блок в другое место, или добавить другие блоки в тот же контейнер.
Ответ написан
Комментировать
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Именно это явный кейс из бутстрапа. Притом плохой по своей сути: тег header существует не только для создания шапки, поэтому для определения стилей ему в обязательном порядке необходимо задавать класс. Еще лучше двинуться дальше с методологии типа БЭМ, которые расширяют указанную логику ответа.

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

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

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

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