Как использовать CSS-переменные для синхронизации размеров и позиционирования?

Question

CSS-переменные позволяют объявить значение один раз и использовать его сразу в нескольких местах: размерах, отступах и позиционировании. Это помогает синхронизировать layout без дублирования чисел. Переменные можно менять на уровне компонента, темы или состояния. Такой подход уменьшает ошибки и упрощает поддержку.

YeaHub · Accepted Answer

CSS-переменные особенно полезны, когда один размер влияет на несколько частей UI.ОпределениеОпределение: CSS-переменные (custom properties) — это значения, объявленные в CSS, которые можно переиспользовать и изменять динамически.Базовый пример синхронизации.card {
  --header-height: 48px;
}

.card__header {
  height: var(--header-height);
}

.card__content {
  margin-top: var(--header-height);
}
Высота заголовка задаётся один разКонтент автоматически подстраиваетсяПозиционирование с теми же переменными.tooltip {
  top: calc(100% + var(--gap));
}

.button {
  --gap: 8px;
}
Размеры и позиции связаны логическиНет “магических чисел”Интеграция с JS и ReactCSS-переменные удобно менять из JS:element.style.setProperty("--sidebar-width", "280px");
Это позволяет:Анимировать layoutРеагировать на resizeИзбегать inline-стилей с дублированием логикиГде это особенно полезноLayout с фиксированными панелямиSticky-элементыТемизация и дизайн-токеныВыводCSS-переменные — мощный инструмент для синхронизации размеров и позиционирования: они делают layout согласованным, читаемым и легко поддерживаемым.