Урок 40. Старый vs Новый: CSS-переменные (custom properties)

Старый подход: жёсткие значения повсюду

Один и тот же цвет #2563eb вписан в каждое правило. Чтобы сменить акцент бренда, придётся найти и заменить его во всех местах — легко что-то пропустить.

.card-primary   { background: #2563eb; color: white; }
.button-primary { background: #2563eb; color: white; }
.alert-primary  { border-color: #2563eb; }

Современный подход: один источник истины

Цвет объявлен раз в :root. Все правила читают его через var(). Смена бренда = правка одной строки.

:root { --accent: #2563eb; }

.card-primary,
.button-primary { background: var(--accent); color: white; }
.alert-primary  { border-color: var(--accent); }

Что меняет смена одной строки

Слева — значение --accent: #2563eb, справа — то же правило, но --accent: #db2777. Разметка и селекторы не тронуты.

/* поменяли только одну строку — обновились все кнопки */
:root { --accent: #db2777; }