Урок 40. Ошибки: CSS-переменные (custom properties)

Частые ошибки

1. Чтение переменной без var()

Самая частая ошибка: написать имя переменной напрямую. Без var() это недопустимое значение — браузер игнорирует свойство, и блок остаётся без фона.

/* ❌ не сработает — нет var() */
.box { background: --brand; }

/* ✅ правильно */
.box { background: var(--brand); }

2. Один дефис вместо двух / опечатка в имени

Имя переменной обязано начинаться ровно с --. -brand или —brand (длинное тире) — это не custom property. И при чтении имя должно совпадать буква в букву.

:root { -brand: #0f766e; }      /* ❌ один дефис — не переменная */
:root { --brand: #0f766e; }     /* ✅ */
color: var(--Brand);            /* ❌ другой регистр — другая переменная */

3. Объявил переменную не там, где читаешь

Переменные наследуются вниз. Если объявить переменную на .child, родитель её не увидит — она доступна только потомку и ниже. Глобальные токены держи в :root.

.child  { --x: red; }
.parent { color: var(--x); }   /* ❌ parent не видит --x потомка */

:root   { --x: red; }
.parent { color: var(--x); }   /* ✅ виден всем */

4. Нет fallback — и блок «исчезает»

Если переменная не определена и fallback не задан, свойство получает невалидное значение и откатывается к initial. Для необязательных токенов давай запасное значение.

.note { background: var(--note-bg); }            /* ❌ риск пустоты */
.note { background: var(--note-bg, #fef9c3); }   /* ✅ страховка */