CSS Custom Properties
Custom properties are CSS variables whose names begin with --. They participate in the cascade and can be consumed using var().
Unlike preprocessor variables, custom properties exist at runtime and can be changed dynamically, including through JavaScript or different CSS states.
CSS Custom Property Flow
Design Tokens
:root {
--space-md: 1rem;
--radius-md: 0.75rem;
--color-primary: #2563eb;
}
.button {
padding: var(--space-md);
border-radius: var(--radius-md);
background: var(--color-primary);
}💡 Centralized custom properties make repeated design decisions easier to change.
Key Takeaways
- Custom properties are runtime CSS values.
- They participate in inheritance and the cascade.
Knowledge Check
How are CSS custom properties named?