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

CSS-переменные стали основой дизайн-систем и тем, но у них есть ограничения.

Плюсы

• Меняются в рантайме — темы, адаптивные значения, данные из JS без перегенерации CSS.
• Каскад и наследование — можно переопределить значение для части страницы.
• Нет сборки — работают в чистом CSS.
• Дизайн-токены — единый источник цветов, отступов и радиусов.
• Меньше дублирования — меняется одно значение вместо множества правил.

:root { --bg: white; --text: #222; }
[data-theme="dark"] { --bg: #111; --text: #eee; }
body { background: var(--bg); color: var(--text); }

Минусы

• Не работают в медиазапросах и именах селекторов.
• Нет проверки — опечатка в имени тихо даст запасное или начальное значение.
• Отладка — итоговое значение видно только в Computed.
• Анимация — без @property переменные не анимируются плавно.
• Производительность — изменение переменной на корне пересчитывает стили всех элементов, которые её используют.

Коротко для собеседования

Плюсы — рантайм, каскад, темы и дизайн-токены без сборки; минусы — нет в медиазапросах, нет проверки опечаток, сложнее отладка и анимация.

Подробнее: MDN — Использование CSS-переменных