В чем разница между CSS in JS и CSS модулей?

CSS Modules изолируют стили на этапе сборки, CSS-in-JS описывает стили в JavaScript и часто генерирует их во время работы.

CSS Modules

/* Button.module.css */
.button { padding: 8px 16px; }

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

• Классы получают уникальные имена при сборке (Button_button__x7a2).
• Обычный CSS, никакого рантайма.
• Динамические значения — через CSS-переменные.

CSS-in-JS (styled-components, Emotion)

const Button = styled.button`
  padding: 8px 16px;
  color: ${(p) => (p.primary ? 'white' : 'black')};
`;

• Стили рядом с компонентом, легко зависят от props.
• Часто есть рантайм: стили генерируются в браузере, что стоит производительности и усложняет SSR и React Server Components.
• Есть варианты без рантайма (vanilla-extract, Linaria).

Как выбирать

Для большинства проектов хватает CSS Modules с переменными. CSS-in-JS выбирают, если много динамики от props и уже есть экосистема.

Коротко для собеседования

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

Подробнее: CSS Modules