Guided Notes

CSS Variables & Best Practices

Custom properties, theming and dark mode, @property, organization, accessibility, and performance.

Custom properties

Slide 1 / 5

CSS variables (custom properties) store values you reuse:

:root { --brand: #2563eb; --radius: 8px; --space: 16px; } .btn { background: var(--brand); border-radius: var(--radius); padding: calc(var(--space) / 2) var(--space); }

Names start with two dashes. Change --brand in one place and every use updates. var(--accent, orange) provides a fallback if --accent isn't defined.

← Transitions & Animations