Какие проблемы CSS-in-JS встречаются на практике и как их решать?
Основы CSS
У CSS-in-JS есть несколько типичных проблем — в основном про производительность и серверный рендеринг.
Проблемы и решения
- Затраты в рантайме. Библиотеки вроде styled-components генерируют и вставляют стили в браузере при рендере. Решение — библиотеки без рантайма (vanilla-extract, Linaria, Panda) или CSS Modules.
- Новые классы на каждое значение. Динамика через интерполяцию props создаёт много классов. Решение — передавать значения через CSS-переменные:
const Bar = styled.div`width: var(--w);`;
<Bar style={{ '--w': `${percent}%` }} />;- SSR и мигание стилей. Нужно собрать стили на сервере и вставить в HTML, иначе страница появится неоформленной.
- Совместимость с React Server Components. Рантайм-библиотеки работают только в клиентских компонентах.
- Размер бандла — сама библиотека добавляет килобайты JS.
- Отладка — сгенерированные имена классов; помогают плагины с понятными именами.
Когда всё же выбирать
Проекты, где стили сильно зависят от props и состояния, и уже есть экосистема вокруг библиотеки.
Коротко для собеседования
Проблемы — рантайм, лишние классы, SSR и несовместимость с Server Components; решают zero-runtime библиотеками, CSS-переменными и CSS Modules.
Подробнее: Emotion — Best practices