What are CSS Variables?
CSS custom properties (commonly called CSS variables) are entities that store specific values for reuse throughout a document. Unlike preprocessor variables (Sass/Less), CSS variables are dynamic, follow the cascade, can be updated at runtime, and are accessible via JavaScript.
Basic Syntax
Declaration & Usage Patterns
| Concept | Syntax | Example | Scope |
|---|---|---|---|
| Declaration | --name: value; | --theme-dark: #1a1a1a; | Element scope |
| Usage | var(--name) | color: var(--theme-dark); | Inherited |
| With fallback | var(--name, fallback) | color: var(--accent, blue); | Fallback if undefined |
| Global scope | :root { } | Available everywhere | Document root |
| Local scope | .component { } | Available only in component | Component tree |
Scoping & Inheritance
Fallback Values
Dynamic Theming System
Responsive Design with Variables
JavaScript Integration
Design System Implementation
Advanced Techniques
Best Practices
- Use semantic naming –
--color-primarynot--blue-500(except design tokens) - Group by category – Colors, spacing, typography, shadows, etc.
- Provide fallbacks – Critical for older browsers and defensive programming
- Avoid over-nesting – Deep variable dependencies are hard to debug
- Use for theming – Perfect for light/dark mode and brand variations
- Document your variables – Create a living style guide
- Combine with calc() – Powerful dynamic sizing and spacing
- Use kebab-case – CSS is case-sensitive, kebab-case is conventional
- Set variables as high as needed – :root for global, components for local
- Avoid overusing !important – Breaks variable cascade benefits
- Test fallbacks – Ensure graceful degradation in unsupported browsers
- Use @property for type checking – Enables smooth transitions of custom properties
Common Mistakes
- CamelCase naming – Variables are case-sensitive (
--myVar≠--myvar). Use kebab-case. - Missing var() wrapper – Using
--colorinstead ofvar(--color) - Spacing issues –
var(--color)notvar( --color ) - Assuming IE support – IE doesn't support CSS variables (have fallbacks)
- Overusing !important – Breaks variable cascade and inheritance
- Not using fallbacks – Variables can be undefined or invalid
- Overly specific selectors – Increases specificity and reduces reusability
- Mutation without transition – Variables can be transitioned with @property
- Using variables in media query conditions – Media queries don't support var()
- Creating circular dependencies –
--a: var(--b); --b: var(--a);(invalid)
Browser Support & Fallbacks
Real-World Complete Example
Conclusion
CSS variables revolutionize how we write and maintain CSS. They enable dynamic theming, reduce repetition, make responsive design more manageable, and provide a bridge between CSS and JavaScript. With near-universal browser support (except IE), CSS custom properties are essential for modern frontend development. Use them for design systems, theme switching, responsive designs, and creating more maintainable, scalable stylesheets. Combine with JavaScript for powerful interactive experiences, and always provide fallbacks for legacy browsers.