CSS Custom Properties (известные как CSS Переменные) революционизируют способ написания и поддержки CSS. Они привносят силу переменных в CSS, обеспечивая динамическую стилизацию, темизацию и более поддерживаемый код.

Базовый синтаксис и использование

Объявление CSS переменных

:root {
  /* Глобальные переменные */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-unit: 1rem;
  --border-radius: 8px;
}

.component {
  /* Локальные переменные */
  --component-padding: calc(var(--spacing-unit) * 2);
  --component-bg: #f8f9fa;
}

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

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
  
  /* С резервным значением */
  color: var(--button-text-color, white);
}

Область видимости и наследование

Глобальная vs Локальная область

:root {
  --global-color: blue;
}

.parent {
  --local-color: red;
  color: var(--local-color); /* красный */
}

.child {
  /* Наследует от родителя */
  background: var(--local-color); /* красный */
  border-color: var(--global-color); /* синий */
}

Переопределение переменных

:root {
  --spacing: 1rem;
}

.compact {
  --spacing: 0.5rem;
}

.spacious {
  --spacing: 2rem;
}

.element {
  padding: var(--spacing);
  /* Отступы меняются в зависимости от родительского класса */
}

Динамическая темизация

Реализация светлой/темной темы

:root {
  /* Светлая тема (по умолчанию) */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --border-color: #dee2e6;
  --shadow: 0 2px 4px rgba(0,0,0,0.1);
}

[data-theme="dark"] {
  /* Темная тема */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --border-color: #404040;
  --shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Компоненты автоматически адаптируются */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  border-radius: 8px;
}

Интеграция с JavaScript

Чтение CSS переменных

// Получение вычисленных стилей
const styles = getComputedStyle(document.documentElement);
const primaryColor = styles.getPropertyValue('--primary-color');

// Получение от конкретного элемента
const element = document.querySelector('.component');
const elementStyles = getComputedStyle(element);
const spacing = elementStyles.getPropertyValue('--spacing');

Установка CSS переменных

// Установка на корне
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

// Установка на конкретном элементе
element.style.setProperty('--component-height', '200px');

// Динамические обновления
const updateThemeColor = (hue) => {
  document.documentElement.style.setProperty('--primary-h', hue);
};

Продвинутые техники

Манипуляции с цветом

:root {
  --primary-h: 210;
  --primary-s: 100%;
  --primary-l: 50%;
  
  /* Базовый цвет */
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  
  /* Вариации */
  --primary-light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%));
  --primary-dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%));
  --primary-alpha: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
}

Адаптивная типографика

:root {
  --font-size-base: 16px;
  --font-size-scale: 1.2;
  
  /* Типографическая шкала */
  --font-size-sm: calc(var(--font-size-base) / var(--font-size-scale));
  --font-size-md: var(--font-size-base);
  --font-size-lg: calc(var(--font-size-base) * var(--font-size-scale));
  --font-size-xl: calc(var(--font-size-lg) * var(--font-size-scale));
}

@media (max-width: 768px) {
  :root {
    --font-size-base: 14px;
  }
}

Лучшие практики

1. Соглашения об именовании: Используйте последовательные префиксы (--color-, --space-, --font-)
2. Предоставляйте fallback: Всегда включайте резервные значения для критичных стилей
3. Документируйте переменные: Комментируйте сложные вычисления
4. Организуйте логично: Группируйте связанные переменные вместе
5. Начинайте глобально: Определяйте системные переменные в :root

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