Variables that cascade
Custom properties are author defined values written with two leading dashes and read through the var function. Unlike preprocessor variables they live in the cascade and inherit down the DOM tree, so a value set high up flows to descendants until overridden.
- Declare a property on a selector such as the root element.
- Read it anywhere with the var function.
- Provide a fallback after a comma when the property may be missing.
Scoping and overriding
Because they inherit, redefining a custom property on a nested element changes the value for that subtree only. This makes them ideal for theming, where one declaration switches many computed values at once.
- A child redefinition shadows the inherited value locally.
- Media queries or a theme class can swap the value in place.
- Invalid values fall back to the inherited or initial value, not the declaration.
Custom properties resolve at computed value time, so they can be changed at runtime with script and react live, unlike static preprocessor variables.
Key idea
Custom properties are real cascading values that inherit down the tree and resolve through var, so redefining one in a subtree retheme everything that reads it.