CSS · Layout and visual systems
How do CSS custom properties work?
Short answer
Custom properties are runtime values that participate in the cascade and inheritance. You read them with var(), provide optional fallbacks, and can change them per element, theme or media query.
A custom property starts with two dashes. Unlike preprocessor variables, it is resolved by the browser at runtime and follows inheritance. That makes it possible to theme a subtree by overriding a value on an ancestor.
:root {
--space: 1rem;
--brand: #2563eb;
}
.card {
padding: var(--space);
border: 1px solid var(--brand, #64748b);
}What makes them different
- They cascade and inherit like normal properties
- var(--name, fallback) supplies a fallback when the property is unset
- JavaScript can read and set them with getPropertyValue and setProperty
- Changing one on an ancestor updates every descendant that reads it
- @property can register a type, initial value and inheritance behaviour
Custom properties store substitution tokens. A value is substituted before the property is parsed, and if the result is invalid, the property becomes invalid at computed-value time. The fallback in var() only applies when the custom property itself is missing, not when its value is invalid for the target property.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1How do custom properties differ from Sass variables?
- 2When does the var() fallback apply?
- 3What does @property add?
- 4How would you theme a component subtree at runtime?
Say it in the interview
Custom properties are real CSS properties that cascade and inherit. I define them on root or a component, read them with var, and override them per theme or subtree. The browser resolves them at runtime, which makes them great for theming. I remember that a var fallback handles a missing property, not an invalid value for the property being set.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.