🎨 CSS переменные: маленький хак для удобства

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

Мы часто пишем что-то вроде:

:root {
  --primary-color: #4f46e5;
}
button {
  background: var(--primary-color);
}

Но что если переменная не определена? Браузер просто ничего не подставит. Чтобы подстраховаться, всегда задавайте fallback:

button {
  background: var(--primary-color, blue);
}

Теперь, даже если где-то вы забыли определить --primary-color, кнопка всё равно останется синим. 👍

Я лично часто использую это при темизации — можно быстро переключать темы, не боясь, что интерфейс "развалится".

Попробуйте применить у себя и посмотрите, насколько это уменьшит количество багов!

👉@frontend_sovet