Урок 40. Теория: CSS-переменные (custom properties)

📁 Раздел: Современный CSS ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#root

⚡ Кратко

CSS-переменная (custom property) — это собственное свойство с двумя дефисами: :root { --brand: #0f766e; }. Читают её через var(--brand).

  • Объявил один раз в :root — используешь var(--brand) во всех правилах.
  • var(--x, fallback) — запасное значение, если переменная не задана.
  • Переменные наследуются: переопредели --brand на .card — изменится только эта область.
  • Сменить тему = поменять значения переменных в одном месте (например в @media (prefers-color-scheme: dark)).

Главная идея

CSS custom property (переменная) — это твоё собственное свойство, имя которого начинается с двух дефисов. Объявляешь его как обычное свойство, а значение потом читаешь функцией var():

:root {
  --brand: #0f766e;   /* объявили переменную */
}

.button {
  background: var(--brand);   /* прочитали её */
}

Главная ценность: значение хранится в одном месте. Используешь var(--brand) в десяти правилах — поменяешь цвет один раз, и обновятся все десять. Без переменных пришлось бы искать и править каждое вхождение вручную.

Переменная — это как главный рубильник в доме. К нему подключены все лампы (элементы, использующие var(--brand)). Хочешь сменить освещение во всём доме — не бегаешь по комнатам, а щёлкаешь один рубильник в :root, и свет меняется везде сразу. А если в одной комнате нужен особый свет — ставишь местный выключатель (переопределяешь переменную на .card), и он влияет только на эту комнату и её содержимое.

Как работает: объявление → наследование → чтение

Переменные подчиняются каскаду и наследованию. Значение, заданное на родителе, доступно всем потомкам через var(). Объявишь переменную в :root (это корневой <html>) — она видна на всей странице.

:root { --brand: #0f766e } значение объявлено здесь .button color: var(--brand) .link color: var(--brand) Потомки наследуют --brand и читают его через var() Поменяй значение в :root — изменятся оба элемента сразу
Переменная объявлена в :root, потомки наследуют её и читают через var().

Запасное значение: var(--x, fallback)

Вторым аргументом var() можно передать fallback — что подставить, если переменная не определена в текущей области:

.note {
  /* если --note-bg нигде не задана — возьмётся #fef9c3 */
  background: var(--note-bg, #fef9c3);
}

Это страховка: компонент не «сломается» в пустоту, а покажет разумное значение по умолчанию.

Переопределение в области видимости

Поскольку переменные наследуются, их можно переопределить на любом элементе — и новое значение увидят только он и его потомки. Так одна и та же разметка карточки даёт разные акценты:

.card { border-left: 4px solid var(--accent, #94a3b8); }

.card.success { --accent: #16a34a; }  /* зелёная */
.card.danger  { --accent: #dc2626; }  /* красная */

Само правило .card не дублируется — меняется только значение переменной в области конкретной карточки.

Когда применять

  • Темы оформления — переключение светлой/тёмной темы заменой значений переменных.
  • Дизайн-токены — палитра, отступы, радиусы, размеры шрифтов в одном месте.
  • Варианты компонента — переопределение переменной вместо копирования всех правил.
Частая ошибка: писать color: --brand вместо color: var(--brand). Без var() это не переменная, а недопустимое значение — свойство просто проигнорируется.
Тема одним движением: объяви переменные в :root, а в @media (prefers-color-scheme: dark) переопредели их значения — весь сайт переоденется без правки самих компонентов.
📄 lesson-40/styles.css
:root {
  --color-bg: #ffffff;
  --color-text: #172033;
  --color-accent: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111827;
    --color-text: #f8fafc;
    --color-accent: #93c5fd;
  }
}

Навигация