foundation

Custom properties

Используйте CSS variables для runtime-темизации, наследуемых tokens, fallback и override на уровне компонента.

Custom properties (CSS variables) — живые значения в cascade и inheritance. Разрешаются на этапе computed value, в отличие от переменных препроцессора, исчезающих при сборке.

					:root {
  --space-md: 1rem;
  --button-bg: var(--color-accent, #2563eb);
}
.button {
  padding-inline: var(--space-md);
  background: var(--button-bg);
}
.button--danger {
  --button-bg: var(--color-danger);
}

Fallbacks в `var(--name, fallback)` повышают устойчивость. `@property` регистрирует типы, inheritance и возможность анимации.

На интервью: как variables дают runtime-темизацию и чем subtree override отличается от констант Sass.

Компромисс: гибкость custom properties в runtime против безопасности препроцессоров на этапе сборки.

Типовые ошибки: неопределённая variable ломает всё declaration; глобальные имена без semantic intent усложняют большие темы.

Чеклист:

Semantic имена variables.
Fallbacks в точках использования.
Override на компоненте или теме.
Runtime resolution vs препроцессоры.