Для чего нужны CSS переменные

CSS переменные (кастомные свойства) позволяют хранить и повторно использовать значения в стилях. Основные преимущества:

1. Переиспользование - один раз задал значение, используй где угодно
2. Гибкость - легко менять значения сразу во многих местах
3. Динамичность - можно менять через JS
4. Темы - удобно реализовывать смену тем оформления

Пример:

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

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

В JS можно менять:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Особенности:

• Наследуются
• Работают в любом CSS-свойстве
• Поддерживают fallback-значения
• Чувствительны к регистру