CSS модули

CSS модули представляют собой механизм локализации стилей, который позволяет изолировать CSS для конкретного компонента, предотвращая конфликты имен классов и упрощая поддержку больших приложений. В контексте Preact использование CSS модулей обеспечивает чистую архитектуру и строгую привязку стилей к компонентам.

Подключение CSS модулей

Для работы с CSS модулями в Preact необходимо, чтобы сборщик (например, Vite или Webpack) поддерживал соответствующую конфигурацию. Обычно файлы модулей имеют расширение .module.css. Пример структуры проекта:

src/
  components/
    Button/
      Button.jsx
      Button.module.css

В компоненте подключение осуществляется следующим образом:

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

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

export default Button;

В этом примере styles.button ссылается на уникальное имя класса, которое генерируется сборщиком, предотвращая конфликты с другими компонентами.

Особенности генерации классов

При использовании CSS модулей имена классов преобразуются в уникальные строки. Например, button может превратиться в Button_button__3XyZ1. Это обеспечивает:

  • Изоляцию стилей — одинаковые имена классов в разных компонентах не конфликтуют.
  • Поддерживаемость — изменения в одном модуле не влияют на другие.
  • Прозрачность — в коде компонента видно, какой стиль применяется, без глобальных селекторов.

Динамические классы

CSS модули позволяют комбинировать несколько классов и применять их динамически:

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

function Button({ primary, label }) {
    const buttonClass = classNames(styles.button, {
        [styles.primary]: primary,
    });

    return <button className={buttonClass}>{label}</button>;
}

Здесь библиотека classnames помогает аккуратно комбинировать несколько стилей, включая условные классы.

Псевдоклассы и вложенность

CSS модули полностью поддерживают стандартные CSS-фичи, включая псевдоклассы (:hover, :focus) и вложенность через препроцессоры вроде Sass:

/* Button.module.css */
.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

В случае использования Sass можно создавать вложенные правила:

/* Button.module.scss */
.button {
    background-color: #007bff;
    color: white;

    &:hover {
        background-color: #0056b3;
    }

    &__icon {
        margin-right: 0.5rem;
    }
}

Работа с глобальными стилями

Иногда требуется использовать глобальные стили внутри CSS модуля. Для этого используется псевдокласс :global:

/* Button.module.css */
:global(body) {
    margin: 0;
    font-family: Arial, sans-serif;
}

.button {
    padding: 1rem;
}

Селекторы, обернутые в :global, не проходят процесс локализации и остаются глобальными.

Импорт CSS модулей в Preact компоненты

Сборщики вроде Vite позволяют импортировать CSS модули напрямую в компоненты:

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

function App() {
    return (
        <div className={styles.container}>
            <h1 className={styles.title}>Пример Preact с CSS модулями</h1>
        </div>
    );
}

Каждое имя класса будет преобразовано в уникальное значение, исключая конфликт с другими компонентами или библиотеками.

Преимущества использования CSS модулей

  • Локальная изоляция стилей компонентов.
  • Простота рефакторинга, так как имена классов связаны напрямую с компонентом.
  • Совместимость с современными сборщиками и препроцессорами.
  • Поддержка динамических стилей через JavaScript.
  • Интеграция с TypeScript с автодополнением классов при использовании генераторов типов.

Ограничения

  • Необходима поддержка сборщика для CSS модулей.
  • Большие проекты могут требовать строгой организации структуры папок, чтобы избежать сложной навигации по модулям.
  • Глобальные стили применяются отдельно через :global и не изолированы автоматически.

CSS модули в Preact обеспечивают надежный способ организации стилей, сочетая преимущества компонентного подхода с безопасной локализацией CSS. Они подходят для крупных приложений, где важно избежать конфликта классов и поддерживать чистую архитектуру кода.

Оглавление