Что такое CSS-in-JS и в чём его минус с точки зрения производительности по сравнению с CSS-модулями?

Что такое CSS-in-JS?

CSS-in-JS — это методология, при которой CSS-стили определяются непосредственно внутри JavaScript-файлов с помощью специальных библиотек, таких как styled-components, Emotion или JSS. Это позволяет использовать всю мощь JavaScript для создания динамических стилей, например, менять цвета в зависимости от пропсов компонента.

Как это работает?

При использовании CSS-in-JS стили обычно создаются как объекты или шаблонные строки, которые затем преобразуются в реальные CSS-правила и вставляются в DOM через тег <style> во время выполнения приложения. Например:

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px;
`;

Этот код создаёт компонент Button, стили которого вычисляются динамически на основе пропсов.

Минус производительности по сравнению с CSS-модулями

Основной недостаток CSS-in-JS — это накладные расходы на этапе выполнения (runtime). Каждый раз, когда компонент рендерится, библиотека должна вычислить стили, создать CSS-классы и вставить их в DOM. Это может привести к дополнительным задержкам, особенно при большом количестве компонентов или частых ререндерах. CSS-модули, напротив, генерируют статические CSS-файлы на этапе сборки (build time). Стили загружаются один раз и не требуют вычислений в браузере, что делает их более производительными.

Пример сравнения

CSS-модули:

/* Button.module.css */
.button {
  background: blue;
  color: white;
}

// React-компонент
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click</button>;
}

Здесь стили уже готовы к использованию после сборки, без дополнительных вычислений.

Вывод

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