Лучше создать набор CSS классов для сетки или стилизовать каждый блок сайта отдельно?

Question

[RNB]

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

Есть два варианта действий:
1. Сделать также как сделано в фрейморках - создать(или скачать готовый) набор общих сеточных классов. Всё стандартно - .row .columns и т.д.
Дальше использовать их по всему проекту верстая как с фреймворком:

<div class="row">
    <div class="column large-12">
        <div class="top">
            content
        </div>
    </div>
</div>

<div class="row">
    <div class="column large-6">
        <div class="some-section">
            some content
        </div>
    </div>
    <div class="column large-6">
        <div class="information">
            some content
        </div>
    </div>
</div>

И так далее. Вся вёрстка строится на дивах которые определяют сетку и внутри уже оформляются блоки с контентом.

Второй вариант - писать "сеточные" правила для каждого блока и строить разметку вот так:

<div class="top">
    Some content
</div>

<div class="block">
    <section class="block__element">
        some content
    </section>
    <section class="block__element">
        some content
    </section>
</div>

В этом случае у меня нет общего набора сеточных классов. Следовательно, каждый новый блок на сайте в котором нужно как-то расположить элементы это дублирование CSS.
Под дублированием я имею ввиду, что нужно объявить родителю display: flex (например), дочерним элементам тоже задать стили которые определят их место, ширину и т.д.
Следовательно, чем больше сайт, тем больше "кастомных" сеток для каждого блока.
По идее это не должно быть особой проблемой т.к. 1 - есть миксины и 2 - gzip.

Мой вопрос: как правильно поступить и как это делают хорошие верстальщики?

Answer 1

[dom1n1k]

Тут нет однозначного ответа, оба варианта возможны в зависимости от ситуации.
Практика показывает, что первый вариант чаще подходит к сайтам, которые собираются из множества кирпичей как конструктор и вариаций сочетаний этих кирпичей очень много (например, админки).
Для сайтов с более-менее уникальным дизайном чаще лучше второй подход, потому что ну не бывает сложных дизайнов, которые полностью можно было бы описать 12-ю равными колонками. Хотя под капотом там всё равно обычно присутствуют некоторые элементы первого подхода, только в виде миксинов.

Answer 2

[Dima Polos]

Мне нравится вот этот инструмент:
https://m.youtube.com/playlist?list=PLyeqauxei6je2...

Answer 3

[Odisseya]

Для глобальной сетки (взаиморасположение крупных блоков верхнего уровня) можно создать свой блок .container, который будет центровщиком, а в разметке его примиксовывать или делать блоком оберткой (когда есть фон на 100%):

<div class="features  container">
    Some content
</div>

<div class="features">
    <div class="container">
      <section class="features__element">
          some content
      </section>
      <section class="features__element">
          some content
      </section>
    </div>
</div>

Затем, блокам сетки задать правила для адаптивности.

Например…

// Каскад от Мобильных к Десктопам

.container {
	width: 280px;
	padding: 0 20px; 
}

@media (min-width: 768px) {
	.container {
		width: 640px; 
		padding: 0 60px; 
	}
}

@media (min-width: 1200px) {
	.container {
		width: 960px; 
		padding: 0 100px; 
	}
}

Более мелкие блоки сетки — колонки, можно прописывать в файле конкретного блока, а если расположение колонок часто повторяется, то как элемент блока сетки.