Задать вопрос

CSS-in-JS. Используется ли в продакшене?

Начитался гневных отзывов о CSS-in-JS и озадачился - критикуют :) Мол, не декларативно, чуждая динамика, "программирование на CSS" и т.д.
А поэтому вопрос: используете ли вы в продакшене CSS в JS и что это за проекты? Какие плюсы и минусы лично вы можете выделить?
В частности меня интересует CSS-in-JS в контексте React.
  • Вопрос задан
  • 2185 просмотров
Подписаться 5 Простой 1 комментарий
Решения вопроса 5
Hecc
@Hecc
Frontend. Дизайн. Шрифт.
Как по мне, CCS-in-JS очень специфичная штука, хотя в продакшене можно встретить довольно часто.

Местами, его использование оправдано, например:
- При работе с динамически выделяемыми css свойствами, например когда обычный calc уже не справляется
- При очень сложном динамическом лейауте
- При темизации компонентов и вообще существовании такой концепции как "Тема" внутри вашего проекта.

Тем не менее, минусов как по мне не меньше:
- Проблема кеширования, такие стили не могут быть закешированы, т.к генерируются на лету и требуют того чтобы браузер распарсил ваш компонент и добавил стили в DOM. + Как результат намного больший размер финального бандла проекта.
- Хаос в файлах, когда приходится держать вместе компоненты и их стили. Опять же решаемо, но те проекты которые я видел, которые используют концепцию CSS-in-JS по большей части фигачат обычные статические стили, просто используя js нотацию, а изначально задумка была не в этом. Для такого, давно придумали более эффективные решения.
- Отвратительный DX при дебаггинге.

Если подрезюмировать, то в целом есть некоторые задачи который этот подход хорошо решает.
Если не можете с уверенностью сказать, что да CSS-in-JS решает мою задачу - использовать его не стоит.
Использование технологии ради технологии, не привидет ни к чему хорошему. Во всех остальных случаях использование более классического стека в виде или чистого CSS или любого из препроцессоров более оправдано.
Ответ написан
miraage
@miraage
Старый прогер
Используют очень много людей. Дело вкуса. Удобно делать темизацию, в ущерб читабельности и производительности.
Ответ написан
Комментировать
profesor08
@profesor08 Куратор тега CSS
Глянь на количество загрузок npm styled-components, пользуются ими многие, особенно в react. Удобно, компактно, все в одном месте. Вот компонент, вот к нему стили, вот динамика в зависимости от пропсов или чего-то еще. Все это дело компилируется в css код с уникальными и не пересекающимися именами классов, все это вставляется с тег стилей. Потом элементу подставляется тот или иной класс. Это значит, что производительность будет идентичная, что и при классическом использовании.
Ответ написан
Комментировать
Kozack
@Kozack Куратор тега CSS
Thinking about a11y
Ответ написан
Комментировать
exeto
@exeto
front-end developer
Использую в продакшене JSS, стили в виде объектов в отдельных файлах. В плане написания, по сути ничем не отличается от CSS с пре/пост-процессорами. Еще один из доводов в пользу CSS-in-JS, упрощение сборки проекта.

Не слушайте ретроградов, которые до сих пор БЭМ юзают для решения проблемы изоляции стилей.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы