Выбираем инструмент для работы со стилями
Chulakov Dev
PostCSS
PostCSS трансформирует CSS в дерево JavaScript-объектов. Этот процесс дополняется подключением плагинов, которые осуществляют разнообразные преобразования в этом дереве. После проведения всех модификаций дерево трансформируется обратно в CSS.
Преимущества
- Вы подключаете только те плагины, которые действительно требуются вашему проекту.
- Высокая гибкость — при необходимости можно написать свой собственный плагин, который будет решать именно вашу задачу.
Недостатки
- Приходится тратить время на поиск нужного плагина.
- Если сравнивать с CSS-in-JS, все еще не такой удобный DX (Developer Experience).
Препроцессоры
Препроцессор — инструмент, который берет текст из одного документа, преобразует его по нужным правилам, и на выходе получается другой текст. Препроцессор добавляет функциональность, которой нет в CSS изначально. Например:
- миксины;
- функции, условные операторы и циклы;
- вложенности селекторов.
Преимущества
- Сильно расширяют возможности обычного CSS.
- Упрощают работу с однотипным кодом.
Недостатки
- Необходимость изучать синтаксис конкретного препроцессора.
- Необходимость поддерживать, как и любой внешний пакет.
- Дополнительное время на компиляцию.
- Не всегда нужен полный функционал препроцессора. Иногда все, что требуется, — это добавить несколько уровней вложенности в CSS. Но вместо этого мы вынуждены использовать мощный препроцессор, что кажется излишним. В таких случаях рациональнее подключить один плагин для PostCSS.
- Со временем часть функций, эксклюзивных для препроцессора, появилась в нативном CSS.
CSS-in-JS
CSS-in-JS (или «стилизация через JavaScript») — это подход к написанию CSS, который интегрируется в компонентный подход JavaScript.
Преимущества
- Динамическое стилизование.
- С применением JavaScript для написания CSS мы можем использовать всю мощь JS для создания динамических стилей, включая переменные, условные операторы, циклы и т.д.
- Удобство работы с компонентами. CSS-in-JS позволяет писать CSS прямо в компоненте, что делает его легко поддерживаемым и повышает читаемость кода.
- Тематизация. Так как стили генерируются с использованием JavaScript, можно создавать сложные системы тематизации с применением объектов и функций.
Недостатки
Главный недостаток CSS-in-JS — это потенциальное снижение производительности из-за динамической генерации стилей. Обычно это не является проблемой, пока вы не работаете с очень большими приложениями или не имеете крайне высокие требования к производительности.
Идеальный сценарий — это когда стили компилируются на этапе сборки, а клиенту уже отправляется готовый CSS. Как раз так работает Panda CSS. Цитата из документации: «Panda — это движок CSS-in-JS, который генерирует атомарный CSS во время сборки (через CLI или PostCSS)».
Vanilla CSS
Тренды приходят и уходят, но некоторые вещи остаются. CSS стремительно развивается. Custom Properties (CSS-переменные), нестинг, Container Queries, нативная поддержка Dark Mode и многое другое. Во времена, когда только создавались препроцессоры, о таких возможностях даже и не мечтали. CSS поддерживается всеми браузерами и не требует установки дополнительных инструментов, а проблема изоляции стилей решена благодаря модульным стилям.
Выводы
Рекомендуем использовать «ванильный» CSS, приправленный Autoprefixer. Хорошая отправная точка. Проблему изоляции стилей решаем с помощью CSS Module. Позже, при появлении специфических потребностей, вы всегда сможете добавить другие плагины, как бы сконфигурировав свой собственный препроцессор.
После того как вы освоились в CSS и хотите попробовать что-то новое, можно смотреть на Panda CSS. На данный момент это единственная библиотека, которая генерирует CSS в момент сборки проекта.