Покроковий гід: CSS змінні для дизайн-системи

Чому CSS змінні — основа сучасної дизайн-системи

CSS кастомні властивості (змінні) дають змогу централізовано керувати значеннями стилів: кольорами, відступами, розмірами шрифтів і іншими параметрами. Вони роблять дизайн-систему гнучкою, полегшують масштабування інтерфейсу та підтримку тем (наприклад, світла і темна).

Базова структура: корень і неймінг

Почнімо з простого прикладу: оголосіть основні змінні в :root для глобального застосування. Використовуйте зрозумілу систему іменування — наприклад, –color-primary, –space-xxs, –font-size-base. Це допоможе команді швидко орієнтуватися в значеннях.

Приклад початкових оголошень

:root {
  --color-bg: #ffffff;
  --color-text: #111827;
  --color-primary: #2563eb;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;

  --font-size-base: 16px;
  --font-scale-ratio: 1.15;
}

Адаптивна типографіка з clamp() і змінними

Замість безлічі медіа-запитів можна поєднати clamp() і змінні, щоб отримати плавну шкалу шрифтів. Це забезпечує комфортне читання на різних екранах без зайвого коду.

Приклад плавної типографіки

:root {
  --fs-min: 1rem; /* 16px */
  --fs-max: 1.25rem; /* 20px */
  --fs-scale: 1.2;
}

h1 { font-size: clamp(var(--fs-min), 2.5vw, var(--fs-max)); }
p  { font-size: clamp(0.875rem, 1.6vw, 1rem); }

Система відступів і сітка

Використовуйте змінні для відступів і розмірів контейнера. В ідеалі визначте базову одиницю (наприклад, 4px) і побудуйте масштаби від неї. Це полегшує вирівнювання і підтримку в інтерфейсі.

• Задайте базову шкалу: –space-unit: 4px;
• Створіть кратні значення: –space-1: calc(var(–space-unit) * 2);
• Використовуйте у відступах і гапах кнопок, карток, сіток.

Теми: перемикання світла і темного режимів

Теми реалізуються просто: перевизначте змінні на певному атрибуті або класі (наприклад, [data-theme=”dark”]). Це дозволяє міняти кольори і контраст без дублювання стилів.

Приклад теми

:root {
  --color-bg: #ffffff;
  --color-text: #111827;
}

[data-theme="dark"] {
  --color-bg: #0b1220;
  --color-text: #e6eef8;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

Практичні поради і кращі практики

• Іменуйте зміни однотипно: категорія-іменник-деталь (наприклад, –color-button-primary).
• Групуйте змінні за блоками: кольори, відступи, типографіка, тіні, зони взаємодії.
• Використовуйте fallback-значення при зверненні до змінних для сумісності: color: var(–color-unknown, #000);
• Документуйте шкали: де і як використовуються конкретні змінні.
• Використовуйте інструменти lint або стилі для перевірки неймінгу і дублювання.

Переваги і обмеження

Переваги очевидні: централізація, динамічна зміна тем, менше дубльованих значень. Але треба пам’ятати про область видимості змінних (джерело оголошення впливає на каскад) і про браузерну підтримку нових функцій (хоча сучасні браузери вже підтримують більшість можливостей).

План впровадження в існуючий проект

Якщо у вас вже є CSS, вводьте змінні поступово: почніть з кольорів та відступів для компонентів, що найчастіше змінюються. Тестуйте в різних розмірах екрану та у темах. Поступове впровадження мінімізує ризик регресій і дає швидку користь.

Кроки впровадження

• Аудит існуючих значень кольорів і відступів.
• Створення початкового набору змінних в :root.
• Поступова заміна хардкодених значень на var(–…).
• Додавання тем і перевірка в реальних умовах.
• Документація і навчання команди, щоб дотримуватись неймінгу.

CSS змінні — потужний інструмент для побудови стійких і гнучких дизайн-систем. З правильним підходом вони значно спростять підтримку інтерфейсу і прискорять розвиток продукту.

Comments

comments