Какую проблему нативного CSS решает CSS-in-JS?

CSS-in-JS: какие проблемы нативного CSS он решает

Главная проблема нативного CSS — глобальное пространство имён

В нативном CSS все стили глобальны. Класс .button в одном файле влияет на все элементы с этим классом во всём приложении. При масштабировании это приводит к:

• Случайному переопределению стилей
• «Войне специфичностей» (specificity wars)
• Страху трогать существующие стили («а вдруг что-то сломается»)

/* Файл A */
.button { background: blue; }

/* Файл B — случайно переопределяет кнопку из файла A */
.button { background: red; }

CSS-in-JS решает это автоматической генерацией уникальных классов для каждого компонента:

// styled-components
const Button = styled.button`
  background: blue;
`;
// Генерирует: .sc-abc123 { background: blue; }
// Изолировано — не конфликтует ни с чем

Проблемы нативного CSS, которые решает CSS-in-JS

1. Отсутствие изоляции стилей

CSS-in-JS автоматически скопирует стили к конкретному компоненту, исключая утечки.

// emotion
const styles = css`
  color: red;
  font-size: 16px;
`;
// className автоматически уникален
<div className={styles}>Text</div>

2. Мёртвый код (Dead CSS)

В нативном CSS сложно понять, используется ли класс. Стили накапливаются, никто не решается их удалять. CSS-in-JS привязывает стили к компоненту: удалил компонент — удалил стили.

3. Динамические стили на основе props/state

В нативном CSS динамика требует либо переключения классов, либо style аттрибутов. CSS-in-JS позволяет использовать JavaScript прямо в стилях:

// Динамика через props
const Button = styled.button`
  background: ${props => props.primary ? "blue" : "white"};
  color: ${props => props.primary ? "white" : "blue"};
  padding: ${({ size }) => size === "large" ? "16px 32px" : "8px 16px"};
`;

<Button primary size="large">Submit</Button>

В нативном CSS это потребовало бы нескольких классов и сложной логики переключения.

4. Совместное расположение стилей и компонентов (Colocation)

В нативном CSS стили отдельно от компонентов (.css-файлы). При рефакторинге легко забыть обновить или удалить стили.

CSS-in-JS хранит стили рядом с компонентом или прямо внутри него. Это повышает связность и снижает вероятность рассинхронизации:

// Всё в одном месте
function Card({ title, highlighted }) {
  return (
    <div css={css`
      border: 1px solid ${highlighted ? "gold" : "gray"};
      border-radius: 8px;
      padding: 16px;
    `}>
      {title}
    </div>
  );
}

5. Автоматические вендорные префиксы

Библиотеки типа styled-components и emotion автоматически добавляют -webkit-, -moz- и другие префиксы, избавляя от ручной работы.

6. Критический CSS / Code Splitting

CSS-in-JS (при SSR) может извлекать только те стили, которые нужны для конкретной страницы, и инлайнить их в HTML. Нативный CSS загружается целиком.

Компромисы CSS-in-JS

CSS-in-JS не серебряная пуля. Его недостатки:

• Runtime overhead: большинство библиотек генерируют стили во время выполнения JavaScript, что увеличивает время до интерактивности
• Размер бандла: сама библиотека добавляет килобайты
• Отладка: автогенерированные классы сложнее читать в DevTools

Поэтому появились альтернативы: CSS Modules (изоляция без runtime), Tailwind CSS (утилитарные классы), vanilla-extract (zero-runtime CSS-in-JS).

Итог

CSS-in-JS решает фундаментальную проблему глобального пространства имён в CSS, добавляя автоматическую изоляцию стилей, устраняя мёртвый код, упрощая динамические стили через JavaScript и обеспечивая колокацию стилей с компонентами. Цена — runtime накладные расходы и усложнение инфраструктуры.