Styling & CSS · CSS

CSS Custom Properties

Also called: CSS variables, Custom properties, var()

Give a value a name in CSS, store it, and reuse it everywhere. Change it in one place and it updates across the site. Commonly used for colors, spacing, and themes.

In detail

CSS variables are defined with a name that starts with two dashes, and read with var(). For example, write --color-primary: #2563eb in :root, and elsewhere write color: var(--color-primary). To change the primary color later, you only edit the line where it's defined, and everything using it follows.

They're different from $variables in Sass. CSS variables work at runtime in the browser, and can be overridden and changed on the fly. For example, redefine the same variables under [data-theme="dark"] and the page switches to dark; redefine them inside a component and only that component is affected; you can also change them live with JavaScript.

How they relate to a Design Token: design tokens are the spec at the design level (what the primary color is, which spacing steps exist), and CSS variables are the most common way to put that spec into web code.

Developer infoTerm ID, DOM cues, match priority

Term ID: style-css-variable
DOM selectors: No DOM cues. This concept isn't detected directly on a page.
Priority: 1 · when several match at the same level, the higher priority wins
Version: v1 · updated Sep 29, 2026