CSS модули и изолированные стили

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

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

Для работы с CSS модулями необходимо настроить сборщик, например, Webpack, с поддержкой css-loader и опцией modules: true. После этого файлы стилей можно импортировать прямо в компоненты:

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

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

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

Синтаксис CSS модулей

CSS модули поддерживают стандартный синтаксис CSS с добавлением возможностей локальной области видимости:

/* Button.module.css */
.button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

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

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

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

CSS модули отлично интегрируются с динамическим формированием классов в Inferno. Для условного применения стилей используют шаблонные строки или библиотеки типа classnames:

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

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

    return <button className={buttonClass}>Click me</button>;
}

В этом примере к компоненту добавляется класс primary только при условии, что проп primary равен true.

Комбинирование CSS модулей

Для крупных компонентов часто требуется объединять несколько модулей. Это делается через обычный импорт и комбинирование классов:

import baseStyles from './Base.module.css';
import themeStyles from './Theme.module.css';

function Card() {
    return <div className={`${baseStyles.card} ${themeStyles.dark}`}>Content</div>;
}

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

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

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

:global(body) {
    margin: 0;
    font-family: Arial, sans-serif;
}

:global(.container) {
    max-width: 1200px;
    margin: auto;
}

Эти правила применяются ко всему документу, не будучи локализованными для компонента.

Интеграция с Inferno JSX

Inferno полностью поддерживает использование CSS модулей в JSX, что позволяет комбинировать компонентную структуру с изолированными стилями. Любой класс из модуля можно передать через className, а также использовать в style как объект для inline-стилей:

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

function Input({ error }) {
    return (
        <input
            className={`${styles.input} ${error ? styles.error : ''}`}
            type="text"
        />
    );
}

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

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

Использование CSS модулей в Inferno делает архитектуру компонентов более устойчивой, предсказуемой и удобной для масштабирования, особенно при работе над крупными проектами с множеством интерфейсных элементов.

Оглавление