В чем разница между CSS Module и CSS-in-JS

Question

В чем разница между CSS Module и CSS-in-JS

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

CSS Module и CSS-in-JS решают проблему изоляции стилей, но по-разному.

CSS Module – это файлы .module.css, где классы автоматически преобразуются в уникальные имена (хешируются). Подключаются как объекты в JS:

import styles from './Button.module.css';
<button className={styles.button}>Click</button>

CSS-in-JS (например, styled-components, Emotion) – стили пишутся прямо в JS/TS, создавая компоненты с уникальными классами:

const Button = styled.button`  
  background: blue;  
  color: white;  
`;

Различия:

Подход: CSS Module – отдельные файлы, CSS-in-JS – стили в JS.
Динамика: CSS-in-JS проще для условных стилей (пропсы, темы).
Бандл: CSS Module генерирует CSS-файлы, CSS-in-JS – стили в runtime (может влиять на производительность).
Инструменты: CSS Module работает "из коробки" в сборщиках (CRA, Next.js), CSS-in-JS требует библиотек.

Ответ 18+ 🔞

А, ну вот, опять про стили заговорили! Слушай, тут такая тема, как два мужика в бане — оба моются, но один веником, а другой мочалкой, понимаешь? И оба, блядь, чистые в итоге, но подходы разные, ёпта!

Вот смотри, есть CSS Module — это как наш старый, проверенный дедовский метод. Берёшь обычный CSS-файлик, только называешь его Button.module.css, и там пишешь свои стили. А потом, сука, магия: сборщик берёт и превращает все твои классы в эти... как их... уникальные имена, чтоб они друг другу не мешали, как соседи по коммуналке! Подключаешь в коде вот так:

import styles from './Button.module.css';
<button className={styles.button}>Кликни меня, сука</button>

И всё, стиль прикручен, изолирован, ни с кем не конфликтует. Красота!

А теперь, блядь, подъезжает молодой и дерзкий CSS-in-JS — типа styled-components или Emotion. Это уже не файлы, это, блять, стили прямо в JavaScript пишутся! Вообще, ёбаный в рот, полный разрыв шаблона! Создаёшь компонент, и сразу ему шкуру натягиваешь:

const Button = styled.button`  
  background: blue;  
  color: white;  
`;

И используешь его как обычный тег <Button />. Стили автоматом уникализируются, всё в одном месте — и логика, и красота.

А в чём, собственно, разница, спросишь ты? Да в хуйне, в деталях!

Подход, блядь: CSS Module — это как отдельный чемодан со стилями. CSS-in-JS — это всё засунуто в один рюкзак, вместе с бутербродами.
Динамика: Хочешь кнопку, которая меняет цвет от настроения? С CSS-in-JS — раз плюнуть, пропсами управляешь. С CSS Module придётся, блядь, голову ломать, классы условно применять.
Что в итоге в бандле: CSS Module на выходе выдаст тебе аккуратные .css файлики. А CSS-in-JS, сука, часто стили в рантайме генерирует, что может на производительность чуть-чуть так... натягивать, понимаешь?
Инструменты: CSS Module уже в современных сборщиках (типа CRA, Next.js) из коробки идёт. А для CSS-in-JS надо, блядь, дополнительные библиотеки тащить, как того самого Буратино за нос.

Вот и весь сказ, ёпта! Выбирай, что душе угодно: классика с файлами или модный JS-колхоз. Главное — чтобы не было конфликтов, а то потом ищешь, где этот хуевый стиль прицепился, волосы на жопе рвёшь!