CSS-in-JS

CSS-in-JS размещает стили рядом с компонентами и выражает динамические варианты из props или state. Реализации делятся на runtime injection (styled-components, Emotion) и compile-time extraction (Linaria, vanilla-extract, Panda).

Runtime-библиотеки внедряют правила в браузере — гибко, но дорого для SSR streaming и cache без дисциплины. Compile-time инструменты выдают статические CSS-файлы с лучшим кешированием и меньшим весом на critical path.

					// compile-time: класс на сборке
const button = css({ padding: '0.5rem', background: 'var(--accent)' });

// runtime: новые правила на каждое динамическое значение без cache
const Box = styled.div<{ $gap: number }>`
  display: flex;
  gap: ${({ $gap }) => $gap}px;
`;
				

На интервью: runtime cost, critical CSS, распространение темы и когда co-location лучше общего stylesheet.

Типовые ошибки: неограниченная генерация динамических стилей; баги порядка стилей при SSR; нет общего слоя tokens.

Чеклист:

• Runtime vs compile-time trade-offs.
• Порядок injection и hydration при SSR.
• Кешируйте или ограничивайте динамические значения.
• Темы через tokens, не разовые props.