CSS variables

CSS variables, officially called custom properties, let you store a value once and reuse it throughout a stylesheet. Define a brand colour, a spacing step or a font family in a single place, reference it everywhere, and a change to that one declaration updates the whole site. They are the native CSS way to keep design values consistent, without a build step.

How to declare and use them

A custom property is declared with a double-dash name, usually on the :root selector so it is available everywhere, and read with the var() function. A fallback can be passed as a second argument.

• Declare: :root { --brand: #1a1a1a; --space: 1rem; }
• Use: color: var(--brand); padding: var(--space);
• Fallback: color: var(--brand, #000);

Scope and the cascade

Custom properties follow the cascade and inherit like any other CSS. Declared on :root they are global; declared on a component they are scoped to that element and its children. This lets you set a default once and override it inside one section, one card or one dark block, without touching the rest of the site.

CSS variables versus Sass variables

The two look similar but work at different moments. A Sass variable is resolved once at build time and then disappears from the output. A CSS variable lives in the browser at runtime, so it can be changed with a media query or with JavaScript, which is what makes live theming possible.

Common use cases

Custom properties shine wherever a value repeats or must change as a set.

• Design tokens: colours, spacing, radii and typography defined once and reused.
• Dark mode: redefine a handful of properties inside a media query or a data attribute.
• Theming: swap a brand palette per section or per client from one place.
• JavaScript control: read and set properties with getComputedStyle and style.setProperty for interactive UI.

Best practices and pitfalls

Name properties by intent (--color-text, not --dark-grey) so the meaning survives a rebrand. Keep global tokens on :root and scope local overrides tightly. Remember that a custom property holds a plain string: it is only validated when used, so a typo fails silently, which is why a sensible var() fallback is worth adding on critical properties.

CSS variables at BeBranded

At BeBranded we drive colour, spacing and type from custom properties, so a brand can evolve from one source of truth and stay consistent across every page and component. It is part of the scalable, token-based front-end in our design work.