Sass сетки

@ultimabear · Регистрация: 05.05.2017

Студворк — интернет-сервис помощи студентам

С нуля начинаю осваивать верстку и разные web приблуды, соответственно, не исключено что я сейчас буду задавать неправильные вопросы и вообще писать полный бред.

Я так понял что в мире web все используют модульные сетки + responsive верстку.
Есть 2 крайних подхода:

Использовать bootstrap-подобные css предопределенные классы для колонок/брейкпоинтов типа .col-md-1
Пилить все вручную, делать медиазапросы и высчитывать с линейкой отступы

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

Немного покопавшись в интернете нашел еще третий способ - использовать css препроцессор и генерировать css из второго способа. Адаптивность достигается засчет встроенных медиазапросов и библиотек типа breakpoint.
Конкретные библиотеки, которые я видел на эту тему:

susy
bourbon neat
flexiblegs
zen-grids
smart-grid (Автор в дополнение советует использовать postcss плагин group-css-media-queries)

Также в 4 версии bootstrap, который еще не вышел похоже тоже есть (или мне кажется) нечто подобное (из документации по сеткам v4):

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container {
  max-width: 60em;
  @include make-container();
}
.row {
  @include make-row();
}
.content-main {
  @include make-col-ready();
 
  @media (max-width: 32em) {
    @include make-col(6);
  }
  @media (min-width: 32.1em) {
    @include make-col(8);
  }
}

Вопрос собственно в том, почему так мало упоминаний и телодвижений относительно третьего способа (sass) в сети? Если загуглить susy то там все статьи за 2013-2014 год, плюс по коммитам на гитхабе там видно что далеко не каждый день все обновляется.
Либо я чего-то не понимаю, либо все делают сайты (не админки) на бутстрапе засирая html, остальные по второму способу мучаются вручную. В чем тут подвох?
И еще один вопрос, если все таки sass-сетки использовать можно, то какую лучше взять? bootstrap-v4? Просто не хотелось бы начать учить все это дело а окажется что оно нафиг никому не надо и надо делать как-то по другому.

@mrtoxas · 30.05.2017, 12:17

Нет никакого третьего вида. Есть сетки или самописные, или позаимствованные. И в одном, и в другом варианте возможно использование препроцессоров, но в них (в препроцессорах) нет никаких своих встроенных медиазапросов и библиотек, пока вы сами их не создадите или опять таки, не позаимствуете у кого-то.
Препроцессоры лишь упрощают\оптимизируют написание стилей, а на выходе будет тот же css, который вы можете написать и без препроцессоров, правда дольше и сложнее.

Сообщение от ultimabear

У второго способа косяки в том что это долго и напряжно, у первого - годится только для простых сайтов

Первое, да, если каждый раз писать сетку вручную, второе - нет. И в первом, и во втором случае, если структура страницы сделана кривыми руками и без мыслей о том, что когда-то кто-то будет что-то в ней переделывать - то изменение такого кода принесет больше боли, чем от редактирования страницы, которая сделана с умом и более-менее грамотно. Это все зависит не от инструмента, а от конкретного разработчкика.

Насчет избыточности чего-либо. Если элемент на странице выполняет какую-нибудь полезную функцию и есть разумное объяснение тому, почему этому элементу тут самое место, то это не засирание кода. Учитывайте еще то, что вашему клиенту по барабану, много ли вы тегов написали или мало. Клиенту нужна скорость и функционирующий продукт. Все остальное - ваши перфекционистические пунктики, которые по большому счету, интересны только вам.
Фрейморки в первую очередь призваны упростить и ускорить задачу разработки, с чем они в основном и справляются. Если вам не нравится большое кол-во классов и "лишних" тегов, пишите сами, как хотите, только не забываем, что в ваш код после вас кто-то будет переделывать.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .