Вёрстка сайта с использованием CSS Custom Properties (переменные)

Вёрстка сайта с использованием CSS Custom Properties (переменные)

CSS Custom Properties — это не просто «переменные в CSS». Это каскадируемые, наследуемые, изменяемые из JavaScript значения, которые живут в DOM. На них строятся design systems, темизация, динамические адаптивные стили без единой строки JS, и анимации значений, которые нельзя анимировать напрямую.

Архитектура токенов дизайна

Профессиональный подход — трёхуровневая система токенов:

/* Уровень 1: Примитивы (не используются напрямую в компонентах) */
:root {
  --color-blue-50: #eff6ff;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-900: #111827;

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-4: 1rem;      /* 16px */
  --space-8: 2rem;      /* 32px */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Уровень 2: Семантические токены (тема) */
:root {
  --color-bg-primary: var(--color-gray-50);
  --color-bg-surface: #ffffff;
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-border: var(--color-gray-100);
  --color-accent: var(--color-blue-600);
  --color-accent-hover: var(--color-blue-700);
}

/* Тёмная тема — только переопределить семантический уровень */
[data-theme="dark"] {
  --color-bg-primary: #0f172a;
  --color-bg-surface: #1e293b;
  --color-text-primary: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-border: #1e293b;
  --color-accent: var(--color-blue-500);
  --color-accent-hover: #60a5fa;
}

/* Уровень 3: Компонентные переменные */
.button {
  --btn-bg: var(--color-accent);
  --btn-bg-hover: var(--color-accent-hover);
  --btn-text: #ffffff;
  --btn-radius: var(--radius-md);
  --btn-padding-x: var(--space-4);
  --btn-padding-y: var(--space-2);

  background-color: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  transition: background-color 150ms ease;
}

.button:hover {
  background-color: var(--btn-bg-hover);
}

/* Вариант кнопки — переопределить только компонентные переменные */
.button--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-bg-primary);
  --btn-text: var(--color-text-primary);
}

Изменение из JavaScript

Custom Properties доступны из JS — мост между логикой и стилями:

// Установить переменную на :root
document.documentElement.style.setProperty('--color-accent', '#8b5cf6');

// Читать текущее значение
const accent = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-accent')
  .trim();

// Применить к конкретному элементу
const card = document.querySelector('.card');
card.style.setProperty('--card-elevation', '3');

// Динамический parallax через scroll
window.addEventListener('scroll', () => {
  const progress = window.scrollY / document.body.scrollHeight;
  document.documentElement.style.setProperty('--scroll-progress', progress.toString());
});

/* Использование в CSS */
.progress-bar {
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
}

Адаптивные значения без media queries

Custom Properties с clamp() для fluid typography:

:root {
  /* Шрифт плавно масштабируется от 320px до 1280px viewport */
  --font-size-h1: clamp(1.75rem, 4vw + 0.5rem, 3.5rem);
  --font-size-h2: clamp(1.375rem, 3vw + 0.25rem, 2.25rem);
  --font-size-h3: clamp(1.125rem, 2vw + 0.25rem, 1.5rem);
  --font-size-body: clamp(0.9375rem, 1vw + 0.75rem, 1.0625rem);

  /* Отступы */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --container-padding: clamp(1rem, 5vw, 3rem);
}

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

Custom Properties наследуются по DOM — компонент может переопределять их внутри своей области:

/* Глобальная карточка */
.card {
  --card-bg: var(--color-bg-surface);
  --card-padding: var(--space-4);
  background: var(--card-bg);
  padding: var(--card-padding);
}

/* В sidebar карточки компактнее */
.sidebar .card {
  --card-padding: var(--space-2);
}

/* В hero — с другим фоном */
.hero-section .card {
  --card-bg: rgb(255 255 255 / 0.1);
}

CSS Houdini и @property

Для анимации числовых значений custom properties браузер нужно явно указать тип:

/* Без @property анимация не работает — браузер не знает тип */
@property --progress {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.animated-border {
  --gradient-angle: 0deg;
  background: conic-gradient(
    from var(--gradient-angle),
    #6366f1, #8b5cf6, #a855f7, #6366f1
  );
  animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

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

PostCSS Custom Properties (для IE11)

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-custom-properties')({
      preserve: true, // Оставить нативные переменные для современных браузеров
    }),
  ],
};

Экспорт токенов из Figma

Figma Variables → Style Dictionary → CSS Custom Properties. Формат для Style Dictionary:

{
  "color": {
    "accent": {
      "$value": "#2563eb",
      "$type": "color"
    }
  }
}

// style-dictionary.config.mjs
export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      files: [{
        destination: 'src/styles/tokens.css',
        format: 'css/variables',
        options: { selector: ':root' },
      }],
    },
  },
};

Сроки

Первичная настройка системы токенов (примитивы + семантика + light/dark теминг): 4–6 часов. Миграция готового проекта с хардкодными значениями на custom properties: 1–2 дня в зависимости от объёма CSS. Поддержка обновлений токенов из Figma через Style Dictionary — настраивается один раз, далее автоматически.