Всем доброго времени суток.
Есть следующая структура блоков:
<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, т.е. используются только большие блоки во всю ширину экрана
