Give your color and spacing values names with custom properties

The same blue and the same spacing number are typed out in a dozen places, and changing the brand color means hunting through every file.

IntermediateRead 4 minDoing: 40 to 60 minutes6 steps

▶ Start

What you'll have at the end

A short list of named colors and spacing values at the top of the stylesheet that every component reads from

Before you start

You need

A stylesheet with at least one color and one spacing number already typed out as a literal value in more than one rule, the way most stylesheets look before anyone names anything.

Not covered

Swapping this whole set of values for a second theme, like a dark mode toggle, isn't covered here; this only covers naming one set of values once.

Leans on

CSS Cheat SheetCarries the custom-property syntax this recipe runs on: declaring on the document root, reading a value back, and the fallback argument.
Sass and CSS Preprocessors Cheat SheetContrasts a compile-time preprocessor variable with a runtime custom property, for the one decision in this recipe about which kind of variable to reach for.

6 steps

Checked 20 Aug 2026

Part of the CSS cookbook