Realnewbie
@Realnewbie
Самоучка

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

Привык работать с 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.

Мой вопрос: как правильно поступить и как это делают хорошие верстальщики?
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ответы на вопрос 3
dom1n1k
@dom1n1k
Тут нет однозначного ответа, оба варианта возможны в зависимости от ситуации.
Практика показывает, что первый вариант чаще подходит к сайтам, которые собираются из множества кирпичей как конструктор и вариаций сочетаний этих кирпичей очень много (например, админки).
Для сайтов с более-менее уникальным дизайном чаще лучше второй подход, потому что ну не бывает сложных дизайнов, которые полностью можно было бы описать 12-ю равными колонками. Хотя под капотом там всё равно обычно присутствуют некоторые элементы первого подхода, только в виде миксинов.
Ответ написан
Odisseya
@Odisseya
WebDev
Для глобальной сетки (взаиморасположение крупных блоков верхнего уровня) можно создать свой блок .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; 
	}
}

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

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

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
Sveak Барнаул
от 40 000 руб.
15 авг. 2018, в 23:38
300 руб./за проект
15 авг. 2018, в 22:39
60000 руб./за проект
15 авг. 2018, в 21:18
30000 руб./за проект