Для чого потрібні CSS-змінні? Наведіть кілька прикладів використання.

Повне пояснення

Що це і навіщо CSS‑змінні (custom properties) дозволяють оголосити значення один раз і переиспользувати їх у всьому стилі. Це зменшує дублювання, полегшує підтримку тем і забезпечує динамічність без JavaScript.

Ключові принципи, терміни, інваріанти

• оголошуються у селекторі (часто :root) через --ім'я: значення;
• доступ до змінної – var(--ім'я)
• підтримка спадкування: значення успадковується по DOM‑дереві
• можна задавати дефолтне значення: var(--color, #000)

Як це працює Під час парсингу CSS браузер збирає таблицю custom properties, а потім підставляє їх у відповідні властивості. Якщо значення змінюється (наприклад, через атрибут data‑theme), браузер перераховує залежні властивості.

Практика і реалізація

:root {
  --primary: #3498db;
  --spacing: 1rem;
}

[data-theme='dark'] {
  --primary: #2c3e50;
}

.button {
  background: var(--primary);
  padding: var(--spacing);
}

У React можна змінювати тему через document.documentElement.dataset.theme = 'dark'.

Тестування

• Jest + Testing Library: перевірити, що елемент має правильний колір після зміни атрибуту.
• Playwright: await page.setAttribute('#root', 'data-theme', 'dark') і перевірка стилю.

Оптимізація продуктивності

• Використання CSS‑змінних мінімізує кількість перерисовок, оскільки браузер не потребує повторного парсингу всього CSS.
• У великих проектах групувати змінні за темами або компонентами для зручності.

Accessibility

• Змінні допомагають підтримувати контрастність у темах, що важливо для WCAG.

Безпека та валідація

• Значення змінних не підлягають XSS, оскільки вони обробляються як CSS.
• При динамічному присвоєнні через JS слід валідувати колір/число.

Типові помилки й edge cases

• Забувають оголосити змінну у :root, що призводить до var(--name) → undefined.
• Використання дефолтного значення без запяті (var(--name #000)) → синтаксична помилка.
• Зміна значення через style атрибут не впливає на інші елементи, що спадкують.

Cheatsheet + можливі follow‑up питання

• Як змінити колір теми без перезавантаження сторінки?
• Чи можна використовувати CSS‑змінні у @media правилах?
• Які браузери підтримують custom properties?