Using CSS custom properties at scale

CSS custom properties participate in the cascade and can change at runtime. That makes them useful for component themes and states, but different from constants generated once by Sass or another preprocessor.

Define semantic public tokens

Expose names such as colour-action and space-component rather than embedding a current brand value in the name. Keep raw palette and scale values internal so consumers depend on purpose instead of implementation.

Control scope and inheritance

Place global defaults on the root and override them at deliberate theme or component boundaries. Avoid writing state into a widely inherited variable when only one child needs to change.

Retain build-time tools where useful

Use Sass for loops, source organisation and calculations that do not need runtime change. Emit custom properties for values that must cascade, vary by context or be inspected as part of the browser result.

Provide supported fallbacks

Place a static declaration before the var() declaration for browsers without support, and decide which themes or enhancements can be omitted there. Internet Explorer will ignore custom-property declarations rather than evaluate them.

Govern changes

Document token ownership, type and supported scope; search production usage before renaming. Add visual tests for default, inverse and high-contrast contexts so a global token edit does not silently damage an uncommon component.