CSS модули

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

Подключение и использование CSS модулей

Atomico поддерживает работу с CSS модулями через стандартные средства сборки, такие как Webpack, Vite или Parcel. Файлы CSS необходимо импортировать в компонент, после чего классы автоматически становятся локальными:

import { c, css } from "atomico";
import styles from "./button.module.css";

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

Button.styles = css`
    ${styles}
`;

customElements.define("x-button", c(Button));
  • import styles from "./button.module.css" — импорт CSS как объекта, где ключи соответствуют именам классов.
  • ${styles} в css позволяет интегрировать локальные стили в Shadow DOM компонента.
  • Shadow DOM обеспечивает инкапсуляцию стилей, делая их применимыми только внутри компонента.

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

CSS модули обычно включают:

  1. Базовые стили компонента — reset и базовая типографика.
  2. Модификаторы — классы для различных состояний (active, disabled, primary).
  3. Вспомогательные утилиты — margin, padding, цвета фона.

Пример структуры button.module.css:

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.button.primary {
    background-color: #007bff;
    color: #fff;
}

.button.disabled {
    background-color: #e0e0e0;
    color: #888;
    cursor: not-allowed;
}
  • .button — основной класс для всех кнопок.
  • .primary и .disabled — модификаторы состояния.
  • Локальные классы позволяют использовать одинаковые имена в разных компонентах без конфликтов.

Интеграция с Shadow DOM

Atomico автоматически создает Shadow DOM для компонентов, что делает использование CSS модулей особенно эффективным. Например:

Button.styles = css`
    ${styles}
    :host {
        display: inline-block;
    }
`;
  • :host позволяет стилизовать корневой элемент компонента.
  • Все классы из CSS модуля становятся доступными только внутри Shadow DOM, предотвращая глобальное воздействие на страницу.

Динамические классы и состояние

CSS модули отлично работают с динамическим применением классов. В Atomico это реализуется через условное присвоение class:

function Button({ primary, disabled }) {
    const className = [
        styles.button,
        primary && styles.primary,
        disabled && styles.disabled
    ].filter(Boolean).join(" ");

    return <button class={className}>{primary ? "Primary" : "Default"}</button>;
}
  • Массив собирает нужные классы в зависимости от пропсов.
  • filter(Boolean) удаляет ложные значения.
  • join(" ") формирует строку классов для элемента.

Scoped CSS и переменные

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

:root {
    --button-padding: 0.5rem 1rem;
    --button-radius: 4px;
}

.button {
    padding: var(--button-padding);
    border-radius: var(--button-radius);
}
  • Переменные могут быть переопределены для разных инстансов компонента через свойства style на хосте.
  • Совместно с Shadow DOM это позволяет создавать гибкие и переиспользуемые компоненты.

Преимущества CSS модулей в Atomico

  1. Изоляция стилей — исключается риск конфликтов с глобальным CSS.
  2. Локальные переменные — возможность определять свои CSS-переменные для каждого компонента.
  3. Поддержка динамических классов — удобное управление состояниями.
  4. Инкапсуляция через Shadow DOM — стили полностью контролируются компонентом.

Практические рекомендации

  • Использовать короткие, семантические имена классов (button, label, icon) и избегать глобальных имен.
  • Разделять стили на базовые и модификаторы для удобного масштабирования.
  • Включать переменные для повторяющихся значений, таких как цвета и отступы.
  • Импортировать CSS модуль в компонент и сразу использовать его внутри css для интеграции со Shadow DOM.

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

Оглавление