What are CSS custom properties (CSS variables)?
Answer
CSS custom properties (also called CSS variables) are user-defined property values that can be reused throughout a stylesheet. Declare them with the -- prefix on a selector (typically :root for global scope): :root { --primary-color: #3490dc; --spacing-lg: 2rem; }. Use them with the var() function: color: var(--primary-color);. Unlike Sass variables (compiled to static values), CSS variables are live in the DOM — they can be changed with JavaScript, overridden in media queries, or scoped to individual components. This makes them powerful for theming (dark mode by redefining variables on body.dark) and design token systems.
Previous
What is BEM (Block Element Modifier) methodology in CSS?
Next
What is the difference between em, rem, px, vh, and vw units in CSS?
More HTML / CSS Questions
View all →- Intermediate How does the CSS cascade work?
- Intermediate What is BEM (Block Element Modifier) methodology in CSS?
- Intermediate What is the difference between em, rem, px, vh, and vw units in CSS?
- Intermediate How does Flexbox differ from CSS Grid? When would you use each?
- Intermediate What is the difference between CSS transitions and CSS animations?