CSS-модули

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

Основы CSS-модулей

CSS-модуль — это отдельный CSS-файл, который импортируется в компонент как объект. Каждое правило внутри модуля получает уникальное имя при компиляции, что исключает пересечение с глобальными стилями или стилями других компонентов.

Пример базового CSS-модуля:

/* button.module.css */
.button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

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

Импорт в компонент Slim.js:

import { Slim } from 'slim-js';
import styles from './button.module.css';

class AppButton extends Slim {
  get template() {
    return `
      <button class="${styles.button}">
        Click Me
      </button>
    `;
  }
}

customElements.define('app-button', AppButton);

В этом примере класс button из CSS-модуля автоматически получает уникальный идентификатор, который применяется к элементу <button>. Это предотвращает коллизии с другими стилями на странице.

Локальные и глобальные стили

CSS-модули в Slim.js поддерживают как локальные, так и глобальные правила. Локальные стили по умолчанию получают уникальные имена. Для глобальных стилей используется синтаксис :global:

/* global.module.css */
:global(.text-large) {
  font-size: 24px;
  font-weight: bold;
}

Эти стили будут применяться глобально и не модифицируют имя класса при сборке.

Использование переменных и вложенности

CSS-модули поддерживают современные возможности CSS, включая переменные и вложенные селекторы:

/* card.module.css */
:root {
  --card-bg: #f9f9f9;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card {
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 20px;
  border-radius: 8px;
}

.card .title {
  font-size: 18px;
  font-weight: 600;
}

В Slim.js эти стили подключаются аналогично, через импорт CSS-модуля:

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

class InfoCard extends Slim {
  get template() {
    return `
      <div class="${styles.card}">
        <div class="${styles.title}">Card Title</div>
        <p>Описание карточки с локальными стилями.</p>
      </div>
    `;
  }
}

customElements.define('info-card', InfoCard);

Динамическое применение стилей

Одной из особенностей Slim.js является возможность динамически изменять классы из CSS-модулей в зависимости от состояния компонента:

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

class ToggleButton extends Slim {
  constructor() {
    super();
    this.active = false;
  }

  get template() {
    const buttonClass = this.active ? styles.active : styles.inactive;
    return `<button class="${buttonClass}" oncl ick="this.toggle()">Toggle</button>`;
  }

  toggle() {
    this.active = !this.active;
    this.update();
  }
}

customElements.define('toggle-button', ToggleButton);

В этом примере класс кнопки меняется при каждом клике, и благодаря CSS-модулю можно безопасно использовать локальные имена классов без риска конфликтов.

Интеграция с препроцессорами

Slim.js поддерживает интеграцию CSS-модулей с Sass, Less и PostCSS. Это позволяет использовать вложенность, миксины и другие возможности препроцессоров, сохраняя при этом преимущества локальных стилей:

/* alert.module.scss */
$danger-color: #dc3545;

.alert {
  padding: 15px;
  border-radius: 5px;
  &.error {
    background-color: $danger-color;
    color: white;
  }
}

Импорт и использование в компоненте:

import styles from './alert.module.scss';

class AlertBox extends Slim {
  get template() {
    return `<div class="${styles.alert} ${styles.error}">Ошибка!</div>`;
  }
}

customElements.define('alert-box', AlertBox);

Рекомендации по организации CSS-модулей

  • Каждый компонент должен иметь отдельный CSS-модуль для локальных стилей.
  • Использовать глобальные стили только для общих утилитарных классов (например, text-center, margin-auto).
  • Динамические классы следует формировать через тернарные операторы или шаблонные строки для удобного управления состоянием.
  • При работе с препроцессорами соблюдать согласованную систему переменных и миксинов для единого дизайна.

Преимущества CSS-модулей в Slim.js

  1. Изоляция стилей — уникальные имена классов предотвращают конфликты.
  2. Поддержка современных CSS-фич — переменные, вложенность, миксины.
  3. Динамическое управление стилями — легко менять класс в зависимости от состояния компонента.
  4. Совместимость с препроцессорами — Sass, Less, PostCSS работают напрямую с CSS-модулями.
  5. Упрощение поддержки больших проектов — каждый компонент управляет своими стилями независимо.

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

Оглавление