Какие плюсы и минусы CSS переменных

Плюсы:

• Гибкость: можно менять значения переменных в рантайме через JS (document.documentElement.style.setProperty('--color', 'red'))
• Область видимости: можно определять переменные на уровне :root (глобально) или внутри селекторов (локально)
• Поддержка тем: легко переключать темы, меняя набор переменных
• CSS-специфичность: переменные учитывают каскад и наследование

Минусы:

• Нет математики: нельзя делать вычисления типа calc(var(--size) * 2)
• Ограниченная поддержка: IE11 не поддерживает (но можно использовать полифиллы)
• Динамические значения: сложно использовать для анимаций, так как изменения не триггерят рефлоу

Пример:

:root {
  --primary-color: #4285f4;
  --spacing: 8px;
}

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