Как применить класс из CSS Modules к элементу?

CSS Modules — это подход, при котором имена классов в CSS-файле автоматически преобразуются в уникальные (например, Button_primary__a1b2c). Это решает проблему глобальных конфликтов стилей в больших приложениях. Файл должен иметь расширение .module.css, чтобы сборщик (Webpack, Vite, Next.js) применил к нему соответствующую обработку.

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

Когда ты импортируешь такой файл в JavaScript, ты получаешь объект, где ключи — это имена классов, написанные в CSS, а значения — сгенерированные уникальные строки. Дальше ты просто подставляешь нужное значение в атрибут className.

/* Button.module.css */
.primary {
  background: #007bff;
  color: white;
}

.danger {
  background: red;
}

// Button.jsx
import styles from './Button.module.css';

export function Button({ variant = 'primary', children }) {
  return (
    <button className={styles[variant]}>
      {children}
    </button>
  );
}

Несколько классов одновременно

Если нужно применить сразу несколько классов, используй шаблонную строку или библиотеку classnames:

import styles from './Card.module.css';
import cn from 'classnames';

<div className={`${styles.card} ${styles.shadow}`}>...</div>
<div className={cn(styles.card, { [styles.active]: isActive })}>...</div>

Где применяется

• В React, Vue, Svelte и других компонентных фреймворках.
• В проектах, где важно избежать глобальных конфликтов CSS.
• В связке с препроцессорами (Sass, Less) и сборщиками (Webpack, Vite).

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