foundation

Custom properties

Use CSS variables for runtime theming, inheritance-aware tokens, fallbacks, and component-level overrides.

Custom properties (CSS variables) are live values that participate in cascade and inheritance. They resolve at computed-value time, unlike preprocessor variables erased at build time.

					: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 in `var(--name, fallback)` improve resilience. `@property` can register types, inheritance, and animatability for advanced use cases.

On interviews: why variables enable runtime theming and how subtree overrides differ from Sass constants.

The trade-off is runtime flexibility through custom properties versus build-time safety from preprocessors.

Common pitfalls: undefined variables invalidate the entire declaration; global names without semantic intent complicate large themes.

Checklist:

Use semantic variable names.
Provide fallbacks at consumption points.
Scope overrides on components or themes.
Know runtime resolution versus preprocessors.