CSS-модулі — це підхід, який дозволяє локально обмежувати імена CSS-класів для конкретних компонентів. Це забезпечує можливість писати CSS-код модульно та ізольовано, зменшуючи ймовірність конфліктів стилів і підвищуючи підтримуваність стилів. Насправді, цей підхід став одним із найпоширеніших для організації проєктів на React.

Організація файлів і папок

Припустимо, у нас є наступний інтерфейс користувача, що складається з трьох компонентів: VideoPlayer, AuthorInformation та VideoDescription.

Ми не будемо об'єднувати всі компоненти та стилі в одному файлі. Натомість для кожного компонента буде створено окрему папку. У кожній папці створюється файл jsx для рендерингу та логіки, а також файл css для застосування стилів. Кожен файл css повинен мати закінчення module.css для досягнення модульності. Таким чином, структура виглядатиме наступним чином:

Примітка

Цей підхід забезпечує зручне рішення для створення React-компонентів і написання стилів. Він гарантує ізольованість кожного компонента та ефективне повторне використання. Локальна область видимості імен класів покращує організацію коду, сприяє повторному використанню та запобігає конфліктам стилів.

Синтаксис

Розглянемо синтаксис використання модульних стилів для компонента на прикладі компонента VideoDescription.

У файлі VideoDescription.jsx створюється компонент, який генерує певну розмітку. Тут немає нічого особливо нового чи незнайомого.

const VideoDescription = () => (
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Різниця виникає тоді, коли потрібно застосувати ім'я класу. Спочатку необхідно імпортувати файл VideoDescription.module.css у файл VideoDescription.jsx. Це можна зробити за допомогою наступного синтаксису:

import <file_name> from "<file_path>";

• <file_name> може бути будь-яким словом, яке асоціюється з файлом. Зазвичай використовують такі імена: css, styles або просто s;
• <file_path> — це правильний шлях до файлу. Синтаксис вже відомий: ./.

Результат:

import css from "./VideoDescription.module.css";

Щоб призначити елементу ім'я класу, можна використати атрибут className. У цьому атрибуті потрібне ім'я класу вказується у фігурних дужках {}. Усередині дужок зазначається слово, пов'язане з файлом стилів, далі крапка . і ім'я класу. Результат: className={css.text}. text — це фактичне ім'я класу.

import css from "./VideoDescription.module.css";

const VideoDescription = () => (
  <p className={css.text}>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Тепер можна відкрити файл VideoDescription.module.css і застосувати стилі до елемента p з іменем класу text, використовуючи селектор класу:

.text {
  background-color: lightgreen;
  color: darkblue;
  font-size: 24px;
}