CSS Custom Properties

CSS custom properties, often called CSS variables, let a developer define values such as --brand-color and reuse them through the var() function. A design system can put shared values on :root, then override specific values in a component or theme. Unlike text replacement performed during a build, custom properties participate in the CSS cascade and can respond to inheritance and runtime changes.

This is useful when many interfaces share consistent buttons, cards, and spacing. Changing the underlying token can update multiple components without finding every color declaration manually. However, a missing or invalid variable can cause a declaration to become invalid at computed-value time, so developers often provide appropriate fallbacks. Variables declared using the normal double-dash syntax inherit by default; the @property rule provides more control.

Custom properties do not replace media queries, and var() cannot be used as a CSS selector or property name. This topic is narrower than CSS generally: it focuses on reusable values and their behavior in the cascade.