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