Custom Properties

What this is. A custom property is a variable you define in CSS and reuse anywhere.

`

:root {

--brand: #B9834F;

}

.button { background: var(--brand); }

`

Declared on :root, it is available to the entire document, because every element inherits from the root.

Why this matters more than saving typing. Once your colors and spacing live in named variables, changing your brand color is one edit instead of forty. More importantly, the names document your intent: --brand and --ink-muted say what a value is for, while #B9834F says only what it is.

✦ Name by role, not by appearance

Call it --brand rather than --gold. If you later change the brand to green, a variable called --gold containing green is worse than no variable at all. The same logic applies to --space-md rather than --space-16.

Theming falls out for free. Because custom properties cascade, redefining them under a different selector re-themes everything that uses them, with no other change.