Что представляет собой объект styles при импорте CSS Modules?

CSS Modules — это подход, при котором CSS-файл компилируется сборщиком (Webpack, Vite и т.п.) в JavaScript-модуль. Вместо обычной строки стилей вы получаете объект, где каждому исходному имени класса сопоставлено уникальное сгенерированное имя. Это решает проблему глобальной области видимости CSS: класс .button в одном компоненте не конфликтует с .button в другом.

Как это выглядит на практике

Допустим, есть файл Button.module.css:

.button {
  background: blue;
  color: white;
}
.primary {
  background: green;
}

В компоненте вы импортируете его и получаете объект:

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

console.log(styles);
// { button: 'Button_button__x1y2z', primary: 'Button_primary__a3b4c' }

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

Что внутри объекта

• Ключи — имена классов, как они написаны в CSS-файле.
• Значения — уникальные строки, сгенерированные сборщиком (обычно включают имя файла и хеш).
• Если используется composes или :global, объект может содержать дополнительные ключи.
• Для camelCase-имён классов можно включить опцию localsConvention: 'camelCase' в конфиге.

Зачем это нужно

Такой подход даёт локальную область видимости стилей без дополнительных библиотек вроде styled-components. Вы продолжаете писать обычный CSS, но получаете изоляцию и предсказуемость. Сборщик также может удалять неиспользуемые классы и минифицировать имена.

Итог: объект styles — это мост между CSS и JavaScript, позволяющий безопасно применять стили в компонентах. Применяйте CSS Modules, когда нужна простая изоляция стилей без накладных расходов CSS-in-JS.