В чем суть такой структуры блоков в Bootstrap?

Question

[Максим Кудрявцев]

Всем доброго времени суток.
Есть следующая структура блоков:

<nav class="site-navigation">
	<div class="container">
		<div class="row">
			<div class="site-navigation-inner col-sm-12">
				(Всякое разное содержимое блока 1)
			</div>
		</div>
	</div>
</nav>
<div class="welcome-slide">
	<div class="container">
		<div class="row">
			<div class="welcome-slide-inner col-sm-12">
				(Всякое разное содержимое блока 2)
			</div>
		</div>
	</div>
</div>

...и т.д. Самих блоков может быть много. Когда мне самому с нуля приходится что-то верстать, я делаю вот так

<div class="container">
	<div class="row">
		<div class="col-sm-12">
			(первый блок)
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			(второй блок)
		</div>
	</div>
</div>

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

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

Используется Twitter Bootstrap 3.x. Оба варианта используются на сайтах типа landing page, т.е. используются только большие блоки во всю ширину экрана

Answer 1

[winbackgo]

Для логического отделения блоков. Страница может состоять из разных блоков никак не связанных между собой. Удалять и вставлять новые легко и понятно.
Блоки могут иметь разный дизайн, например бг должен занимать всю ширину а внутри имеется container.
В итоге все зависит от задачи. Если вам подходит второй вариант, то используйте его, никакой ошибки в этом нет. Мне по душе первый вариант - он более гибкий.

Answer 2

[gassmonkey]

Каждый из этих блоков может иметь уникальный дизайн, и таким образом можно изменить определённый блок, не трогая остальные.
Твой подход уместен, только если все блоки идентичны, и проект на имеет дизайна.

Answer 3

[Алексей Уколов]

У лендингов любят делать фон "в полоску" - то есть у каждого раздела свой. Если всё обернуть в один контейнер, без костылей не обойтись.

Comments

[Максим Кудрявцев]

Вы имейте ввиду полоску 1 px в ширину и высотой на все блоки ландинга?

[Алексей Уколов]

Да, это один из костылей.

Answer 4

[Алексей Струков]

У них просто такая структура фреймворка.
Используются вспомогательные классы, которые в зависимости от содержания добавляют некоторые свойства css. Например если содержимое должно иметь какой то эффект типа transform: scale(), то контейнер для этого содержимого может добавить свойство overflow: hidden. Можно открыть их css и посмотреть что каждый класс добавляет в стили. Остается либо принять их правила либо пилить свой фреймворк с блэкджеком и media queries )

Answer 5

[Илья Пирожок]

Что бы потом подобраться к внутренним блокам. Ты же не будешь трогать бутстраповские .container в своих стилях верно? Вот для удобства их и добавляют