CSS-переменные

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

Определение и использование CSS-переменных

CSS-переменные (custom properties) задаются с помощью синтаксиса --имя-переменной: значение;. Они могут быть объявлены глобально на :root или локально в пределах компонента. В FAST Element переменные активно используются внутри шаблонов css для управления стилями компонентов.

Пример объявления CSS-переменной в FAST Element:

import { css, FASTElement } from '@microsoft/fast-element';

const styles = css`
  :host {
    --primary-color: #0078d4;
    --secondary-color: #e5e5e5;
    display: block;
    padding: 16px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
  }
`;

export class MyButton extends FASTElement {}

В этом примере переменные --primary-color и --secondary-color определяют основные цвета компонента. С помощью функции var(--имя-переменной) можно применять их в любом CSS-свойстве, включая фон, цвет текста, границы и тени.

Локальные и глобальные переменные

Глобальные переменные обычно объявляются на уровне :root и применяются ко всем компонентам:

:root {
  --font-size-base: 16px;
  --font-family-base: 'Segoe UI', sans-serif;
}

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

const buttonStyles = css`
  :host {
    --button-bg: #0078d4;
    --button-color: #ffffff;
    background-color: var(--button-bg);
    color: var(--button-color);
  }
`;

Локальные переменные переопределяют глобальные приоритетно в пределах компонента.

Динамическое изменение значений

FAST Element позволяет изменять значения CSS-переменных через JavaScript. Это особенно полезно для создания тем, переключения состояний и анимаций. Значения можно менять как на уровне компонента, так и глобально.

Изменение переменной на уровне компонента:

this.style.setProperty('--button-bg', '#ff0000');

Изменение глобальной переменной:

document.documentElement.style.setProperty('--font-size-base', '18px');

Переменные автоматически обновляют все свойства, которые используют var(--имя-переменной), без необходимости вручную менять каждый стиль.

Интеграция с FAST CSS и шаблонами

FAST Element поддерживает привязку CSS-переменных через реактивные свойства компонентов. Можно определять свойства компонента и синхронизировать их с CSS-переменными:

import { FASTElement, attr, css } from '@microsoft/fast-element';

const cardStyles = css`
  :host {
    --card-bg: var(--default-card-bg, #ffffff);
    background-color: var(--card-bg);
    padding: 16px;
    border-radius: 8px;
  }
`;

export class MyCard extends FASTElement {
  @attr cardBg;

  cardBgChanged(oldValue, newValue) {
    this.style.setProperty('--card-bg', newValue);
  }
}

Здесь свойство cardBg компонента напрямую управляет локальной CSS-переменной --card-bg, обеспечивая динамическое обновление стилей.

Наследование и каскад

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

:root {
  --theme-color: #0078d4;
}

parent-component {
  --theme-color: #ff6600;
}

child-component {
  color: var(--theme-color);
}

В данном примере child-component внутри parent-component использует оранжевую переменную, а вне него — синюю.

Использование с псевдоэлементами и медиазапросами

CSS-переменные удобно использовать для адаптивных и интерактивных интерфейсов. Их можно применять внутри медиазапросов и псевдоклассов:

:host {
  --card-padding: 16px;
  padding: var(--card-padding);
}

@media (max-width: 600px) {
  :host {
    --card-padding: 8px;
  }
}

:host(:hover) {
  --card-bg: #f0f0f0;
  background-color: var(--card-bg);
}

Переменные упрощают управление стилями при изменении состояния компонента и размера экрана.

Комбинация с calc() и fallback-значениями

CSS-переменные поддерживают функции calc() и fallback-значения, что расширяет возможности динамических вычислений:

:host {
  --spacing-unit: 8px;
  margin: calc(var(--spacing-unit) * 2);
  padding: var(--padding, 12px); /* fallback */
}

calc() позволяет комбинировать переменные с математическими операциями, а fallback-значение обеспечивает безопасное отображение, если переменная не задана.

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

  • Использовать глобальные переменные для базовой темы (цвета, шрифты, размеры), локальные — для специфики компонентов.
  • Для динамических тем и состояния компонентов связывать CSS-переменные с реактивными свойствами.
  • Применять fallback-значения для обеспечения корректного отображения при отсутствии переменной.
  • Комбинировать с calc() и медиазапросами для гибких и адаптивных интерфейсов.
  • Минимизировать дублирование переменных и придерживаться иерархии: глобальные → локальные → состояние/hover/active.

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

Оглавление