Что такое препроцессоры CSS
Что проверяют
Знаете ли вы, что они дают, и понимаете ли, что часть их возможностей уже есть в самом CSS.
Как отвечать
Препроцессор это надстройка над CSS со своим синтаксисом, которая компилируется в обычные стили. Самые известные это Sass со своим более популярным диалектом, Less и Stylus.
Что они дают:
- переменные для цветов, отступов, шрифтов;
- вложенность селекторов, повторяющую структуру разметки;
- примеси: переиспользуемые наборы свойств, в том числе с параметрами;
- функции и вычисления: операции с цветом, математика;
- условия и циклы: генерация однотипных правил, например набора отступов;
- разбиение на файлы с последующей сборкой в один.
Дальше самое важное для современного ответа: часть этого уже есть в самом CSS, и разница принципиальна.
Собственные свойства CSS это не то же самое, что переменные препроцессора. Первые существуют во время выполнения: наследуются по дереву, меняются в зависимости от медиазапроса или класса, читаются и задаются из кода. Именно на них строятся темы оформления. Переменные препроцессора подставляются при сборке и во время выполнения не существуют вовсе, поэтому переключить тему ими нельзя.
Вложенность появилась в самом CSS, поэтому ради неё одной подключать препроцессор больше не нужно.
Что остаётся за препроцессорами: примеси, циклы и логика на этапе сборки.
Про современную практику стоит сказать: многие проекты обходятся без них, комбинируя собственные свойства, вложенность и постпроцессор с плагинами вроде автоматической расстановки префиксов. Другие используют модули стилей или утилитарный подход, где вопрос препроцессора вообще не возникает.
Отдельно про вложенность: увлечение ею даёт длинные цепочки селекторов с высокой специфичностью, которые потом невозможно переопределить. Глубину держат в пределах двух-трёх уровней.
Где спотыкаются
Считают переменные препроцессора и собственные свойства CSS одним и тем же.
Вкладывают селекторы на пять уровней и получают неуправляемую специфичность.
Не знают, что вложенность есть в самом CSS.
Тянут препроцессор ради одних переменных.