What Are CSS Custom Properties (CSS Variables)?
Learn how CSS custom properties work, how they cascade, and why they beat Sass variables for live theming.
Expected Interview Answer
CSS custom properties, written as --name and read with var(--name), are author-defined variables that cascade and inherit like any other CSS property, letting a single declared value flow down through the DOM and be reused, overridden per component, or changed live via JavaScript without recompiling any stylesheet.
A custom property is declared on a selector, most often :root for a global value, and it inherits down to descendants just like color or font-size would, meaning it can be overridden at any point in the tree to scope a different value to a subtree without touching the original declaration. The var() function reads the current value at the point of use, and can supply a fallback as a second argument if the property is undefined. Because custom properties are resolved by the browser at render/cascade time rather than at build time, they can be read and updated dynamically via JavaScript’s style.setProperty, enabling live theme switching, responsive tokens tied to media queries, or animated values, none of which is possible with build-time constructs like Sass variables. They differ fundamentally from preprocessor variables, which are stripped out entirely during compilation and have no runtime presence at all.
- Enables live theme switching (light/dark) without a rebuild or page reload
- Cascades and can be scoped/overridden per component, unlike Sass variables
- Readable and writable at runtime from JavaScript for dynamic UI
- Reduces duplication of repeated values like brand colors or spacing scales
AI Mentor Explanation
A CSS custom property is like a team’s standard boundary-rope distance set once at the ground level, which every match on that ground inherits automatically. A specific match can still override it locally for a day-night fixture with a different rope setting, without changing the ground’s default. Because the distance is measured fresh before every match rather than fixed permanently, officials can adjust it live for weather conditions. That inherited-but-overridable, live-readable value is exactly what a CSS custom property provides.
Step-by-Step Explanation
Step 1
Declare the property
Define --name: value on a selector, typically :root for a global default.
Step 2
Consume it with var()
Use var(--name, fallback) anywhere a value is expected; the fallback applies if the property is unset.
Step 3
Override per scope
Redeclare the same --name on a descendant selector to scope a different value to that subtree via normal cascade/inheritance.
Step 4
Read or update at runtime
JavaScript can call getComputedStyle().getPropertyValue() or element.style.setProperty() to read/change values live.
What Interviewer Expects
- Correct syntax: declaration with -- prefix, consumption with var()
- Understanding that custom properties cascade and inherit, unlike preprocessor variables
- Awareness that they resolve at render time, enabling runtime JS updates
- A concrete use case like theme switching or component-scoped tokens
Common Mistakes
- Confusing CSS custom properties with Sass/Less variables, which are build-time only
- Forgetting the var() fallback syntax for undefined properties
- Not realizing custom properties inherit and can be overridden by scope
- Assuming a custom property changed via JS requires a full stylesheet rebuild to apply
Best Answer (HR Friendly)
“CSS custom properties are like variables you can define once in your stylesheet, for example a brand color, and reuse everywhere with var(). Unlike variables in tools like Sass, these are understood by the browser itself at runtime, so you can change them live with JavaScript, which is exactly how a lot of dark-mode toggles work.”
Code Example
:root {
--brand-color: #2563eb;
--spacing-md: 16px;
}
.card {
color: var(--brand-color);
padding: var(--spacing-md);
}
/* Scoped override just for this subtree */
.dark-theme {
--brand-color: #93c5fd;
}
/* JavaScript can update it live, no rebuild needed */
document.documentElement.style.setProperty('--brand-color', '#16a34a')Follow-up Questions
- How do CSS custom properties differ from Sass/Less preprocessor variables?
- How would you build a dark-mode toggle using custom properties?
- Can custom properties be used inside media queries or calc()?
- What happens if a custom property is referenced before it is defined?
MCQ Practice
1. How do you declare a CSS custom property?
CSS custom properties are declared with a double-hyphen prefix, e.g. --brand-color: blue.
2. What is a key advantage of CSS custom properties over Sass variables?
Custom properties exist at runtime in the browser, unlike Sass variables which are stripped out at compile time.
3. What does var(--gap, 8px) do if --gap is not defined?
The second argument to var() is a fallback value used when the custom property is undefined.
Flash Cards
How do you declare a CSS custom property? — --name: value; typically on :root or a component selector.
How do you read one? — var(--name) or var(--name, fallback) for a default value.
Do custom properties inherit? — Yes — they cascade and inherit like normal CSS properties, and can be overridden per scope.
Key difference from Sass variables? — Custom properties are resolved at runtime by the browser, so JavaScript can read/update them live.