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

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 требует библиотек.