Идеи smart-grid

На наш взгляд, первый и главный вопрос, требующий рассмотрения, - зачем создавать ещё одну сетку для web-страниц, когда есть boostrap и множество других сеток и ui-фреймворков. А ещё ведь и чистый CSS Grid Layout всё лучше и лучше поддерживается браузерами.

Ответ на данный вопрос во многом зависит от ряда философских моментов.

1. Какой подоход вам нравится для задания CSS-стилей?

Если вы фанат atomic CSS, и толпа классов в HTML-разметке вас не смущает, smart-grid не для вас. Bootstrap, spectre.css и другие, похожие на них фреймворки, в таком случае подойдут лучше.

Небольшой тест - как вы относитесь к HTML-разметке, расположенной ниже?


<div class="row">
   <div class="col col-12 col-xs-6 col-sm-4 col-md-3">
      text 1
   </div>
   <div class="col col-12 col-xs-6 col-sm-4 col-md-3">
      text 2
   </div>
   <div class="col col-12 col-xs-6 col-sm-4 col-md-3">
      text 3
   </div>
   <div class="col col-12 col-xs-6 col-sm-4 col-md-3">
      text 4
   </div>
</div>

На наш взгляд - это просто кошмар. Не сама концепция, а необходимость дублировать все эти огромные наборы классов у однотипных или похожих элементов. Их неудобно анализировать, их неудобно редактировать.

Emmet спасает ситуацию лишь при первичном написании разметки, потом править придётся вручную. Pug поможет, но он нравится далеко не всем.

2. Насколько аккуратную адаптивку вы делаете?

CSS-сетки весьма ограничены в количестве breakPoints. Обычно в пакете идёт 4-5 контрольных точек, но не маловато ли этого для качественной адаптивной вёрстки?

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

Также понятен стиль bootstrap, который делает ширину контейнера меньше, чем следующий break point. Но это не настоящая адаптивная вёрстка, это большое количество свободного пространства по бокам. То есть подход, чтобы не напрягаться. Иногда результат устраивает, иногда нет.

Конечно, можно сделать 10 контрольных точек. Но! В CSS-сетке каждая контрольная точка означает появление кучи новых классов, которые будут использоваться весьма редко.

3. Насколько вы следуете сетке, сделанной дизайнером?

На большом экране, который по размеру не меньше присланного дизайнером макета, вариантов нет - всё равно px perfect делать придётся. А вот что на меньших размерах?

Любители "чистой вёрстки без фреймворков" порой продвигают идеи, что сетка - это зло, которое делает сайты похожими друг на друга. Наверно, просто лень её соблюдать. Поставили display flex, basis и justufy-content, элементы, мол, сами решат, как стать. Размер будет правильный, иногда отступы больше, иногда меньше и т.п.

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

по размеру оставаясь кратными N колонкам
сохраняя отступы между колонками

Разумеется, этот список справедлив не для всех элементов, но для большинства.

Без фреймворков постоянно следовать сетке неприятно - получается много однотипного кода. Любой сеточный фреймворк легко решает задачу, но про них уже были написаны пункты 1 и 2.

Smart Grid предлагает схему, которая позволяет использовать сетку без перечисленных выше проблем.

Но для начала следует определиться с тем, какой код мы хотим получить на выходе.