CSS modules это

CSS Modules — это способ построения CSS-стилей, позволяющий ограничить область видимости стилей до конкретного компонента, используя уникальное пространство имен для классов.

С помощью CSS Modules, вы можете создавать локально-ограниченные и уникальные классы CSS-стилей для каждого компонента в вашем проекте. Также, можно использовать переменные в CSS, экспортировать и импортировать стили между компонентами и многое другое.

Преимуществами CSS Modules являются:

1. «Отсекание» стиля: Классы CSS-стилей, созданные в CSS Modules, не будут конфликтовать с классами других компонентов или стилей глобального класса.
2. Облегчение сопровождения: Стили применяются только к определенному компоненту, что упрощает их настройку и управление в случае изменения требований или дизайна.
3. Повторное использование: Вы можете легко импортировать и использовать стили из других компонентов, что позволяет вам использовать код, повторно используя уже существующие стили.
4. Читаемость кода: CSS Modules позволяют использовать классы в CSS как обычно, но при этом дополнительно снабжают их уникальным идентификатором для более легкого чтения кода.

Использование CSS Modules довольно просто.

Сначала необходимо установить соответствующую библиотеку (например, webpack-css-modules или css-loader). Далее, в вашем CSS-файле, вы можете использовать нотацию :local для создания локальных классов. Например:

/* styles.module.css */

.container :local(.title) {
  color: red;
}

.container :local(.text) {
  font-size: 16px;
  font-weight: bold;
}

:local(.btn) {
  background-color: blue;
  color: white;
}

Здесь мы создаем локальные классы для .title, .text и .btn и определяем соответствующие стили. Локальные классы создаются с помощью ключевого слова local.

Далее, в вашем компоненте, вы можете импортировать этот модуль CSS и использовать его как обычный объект:

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

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Заголовок</h1>
      <p className={styles.text}>Текст</p>
      <button className={styles.btn}>Кнопка</button>
    </div>
  );
}

Здесь мы импортируем модуль CSS и применяем его стили к соответствующим элементам внутри компонента с помощью соответствующих классов.

С использованием CSS Modules вы можете вести разработку в более чистом коде, возможно повторное использование стилей и снизить риски случайного изменения стилей в других частях приложения.