What is a CSS Variable (Custom Property)?
Learn what CSS variables (custom properties) are, how var() and fallbacks work, and how to use them for theming, dark mode, and design tokens.
Expected Interview Answer
A CSS variable, formally called a custom property, is a reusable value declared with a double-dash prefix like --primary-color and accessed anywhere with var(), letting you define a value once and reference it across a stylesheet.
Custom properties are typically declared on :root to make them globally available, or scoped to a specific selector so they only apply (and cascade down) within that subtree, following normal CSS cascade and inheritance rules unlike Sass variables, which are compile-time only. var(--name, fallback) lets you supply a fallback value if the variable is unset, and because custom properties are live in the DOM, JavaScript can read or update them at runtime with element.style.setProperty, and media queries can redefine them to build theming (like dark mode) without duplicating whole rule sets. Since they cascade and inherit, a custom property redefined inside a component or media query automatically affects every var() reference beneath it, which is the core mechanism behind CSS-only theme switching.
- Single source of truth for repeated values like colors or spacing
- Live at runtime — updatable via JavaScript without recompiling CSS
- Cascade and inherit naturally, unlike preprocessor variables
- Enable CSS-only theming (e.g. dark mode) via redefinition in scopes/media queries
- Reduce duplication and make design tokens easy to maintain
AI Mentor Explanation
A CSS variable is like a team's official kit color registered once with the league — every jersey, cap, and pad references that single registered shade instead of each item being dyed separately. If the league updates the registered color for a night match, every piece of kit referencing it changes automatically, without re-dyeing each item by hand.
Step-by-Step Explanation
Step 1
Declare the custom property
Define it with a double-dash name, typically on :root for global scope: --primary-color: #4f46e5;
Step 2
Reference it with var()
Use var(--primary-color) anywhere a value is expected, optionally with a fallback: var(--gap, 16px).
Step 3
Scope for component overrides
Redeclare the same custom property inside a component selector or media query to override it only within that scope, thanks to cascade and inheritance.
Step 4
Build theming with redefinition
Redefine variables inside a [data-theme='dark'] selector or prefers-color-scheme media query to switch entire themes without duplicating rules.
Step 5
Access or update at runtime
Read or set custom properties from JavaScript with getComputedStyle/element.style.setProperty for dynamic, live updates.
What Interviewer Expects
- Knows the -- syntax and var() usage
- Explains that custom properties cascade and inherit unlike Sass variables
- Can describe scoping a variable to :root vs a specific selector
- Understands the var(--name, fallback) fallback syntax
- Knows they're accessible/updatable at runtime via JavaScript
Common Mistakes
- Confusing CSS custom properties with Sass/Less variables (compile-time only)
- Forgetting the double-dash prefix in the declaration
- Not leveraging cascade/inheritance for scoped overrides (e.g. per-component theming)
- Omitting a fallback value in var() where one would prevent breakage
- Assuming custom properties can't be updated by JavaScript at runtime
Best Answer (HR Friendly)
“A CSS variable lets you define a value, like a brand color, once and reuse it everywhere in your stylesheet. If you need to change that color later, you update it in one place and every part of the site using it updates automatically, which makes maintaining a consistent design much easier.”
Code Example
:root {
--primary-color: #4f46e5;
--spacing-md: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing-md) calc(var(--spacing-md) * 1.5);
}[data-theme='dark'] {
--primary-color: #818cf8;
--bg-color: #111827;
}
body {
background: var(--bg-color, white);
}Follow-up Questions
- How does var(--name, fallback) behave when the variable is undefined?
- How do CSS custom properties differ from Sass/Less variables?
- How would you implement a dark mode toggle using custom properties?
- Can JavaScript read or update a CSS custom property at runtime?
- How does scoping a custom property to a component selector affect inheritance?
MCQ Practice
1. How do you declare a CSS custom property?
Custom properties are declared with a double-dash prefix, e.g. --primary-color: blue; inside a rule like :root.
2. How do you use a declared custom property in a CSS value?
The var() function reads the custom property's value, and can accept an optional fallback: var(--x, fallback).
3. What key advantage do CSS custom properties have over Sass variables?
Unlike Sass variables (compile-time only), CSS custom properties are live in the DOM, follow the cascade, and can change at runtime.
Flash Cards
How do you declare a CSS custom property? — With a double-dash prefix, e.g. --primary-color: #4f46e5; usually inside :root.
How do you use a custom property's value? — With var(--name) or var(--name, fallback) for a default if unset.
Do CSS custom properties cascade and inherit? — Yes — unlike preprocessor variables, they follow normal CSS cascade and inheritance rules.
Can JavaScript interact with CSS custom properties? — Yes — via element.style.setProperty() or getComputedStyle(), enabling live runtime updates.