CSS custom properties
A small design system
Lesson 11 of 20 · 9 min · Module 4: A complete little website
Repeated colors and spacing values are easier to maintain when they have names. CSS custom properties let you share those values across rules.
Start this lesson →Free. No installation: you write and run the code in your browser, and it is checked automatically.
By the end, you’ll be able to…
- Name reusable design values
- Read values with var
- Understand inheritance and overrides
The idea
Declare a property such as --accent on :root, then read it using var(--accent). Custom properties participate in inheritance and can be overridden in a narrower scope.
:root { --accent: #285b44; }
.panel { color: var(--accent); }01Choose names that describe a role
A name such as --accent expresses why the value exists. It stays meaningful if you later change the actual color. A role-based name can serve many components.
02Let one change travel
When several rules reference --space, updating that definition updates all those uses. A component can override a custom property locally when it needs a different value.
Your turn
--accent: #285b44 and --space: 24px on :root. Give .panel that accent text color and spacing as padding, using the custom properties.What the checks look for
- Accent is defined on the root
- Spacing is defined on the root
- Panel uses the accent color
- Panel has the shared padding
Take this with you
Consistency comes from a small set of deliberate shared decisions.