Declaring and scoping CSS custom properties
understanding of custom property syntax and the cascade.
declare with --name, read with var(), :root makes it global while a class scopes it locally.
thinking they behave like compile-time Sass variables.
What's really being asked
This checks that you know CSS custom properties are runtime, cascading, inheritable values rather than preprocessor constants. It also probes your mental model of scope and the cascade.
The full answer
You declare a custom property by prefixing the name with two dashes, for example --brand-color: #6344D6, placed inside a selector block. You read it with the var() function, optionally giving a fallback, such as color: var(--brand-color, black). A property declared on :root attaches to the document root, so it is inherited by every element and acts as a global default. The same property name declared on a component class sets a new value for that element and its descendants only, shadowing the global value within that subtree. Because they participate in the cascade and inheritance, custom properties are dynamic: you can override them with a media query, a parent class, or JavaScript at runtime.
The mistakes people make
Saying they are identical to Sass variables, which are resolved and stripped at compile time and cannot change per element or at runtime. Forgetting the var() function and writing the raw name as a value. Assuming :root and a class behave the same way regarding inheritance.
What usually comes next
How do fallbacks work, and can you nest var() inside another var(). How would you flip a theme by overriding properties on a body class or with prefers-color-scheme. Why do invalid custom property values use the guaranteed-invalid value and fall back differently from normal properties.
A concrete example
Define --space: 16px on :root so the whole page shares a default gap. On a compact .card class, redeclare --space: 8px; every var(--space) inside that card now resolves to 8px while the rest of the page keeps 16px, all without any JavaScript or recompilation.
Interview question
A component class redeclares a custom property that is also set on :root. What value do elements inside that component see?
- a.Always the :root value, since :root has higher priority
- b.Whichever was defined last in the stylesheet, regardless of scope
- c.The component value, because it is scoped to that subtree and overrides the inherited oneCorrect
- d.A compile error, since the property is defined twice
Why? this is the answer
Custom properties inherit through the cascade, so a value set on the component scopes to its subtree and shadows the global :root value there. Source order across unrelated selectors does not decide this; scope and specificity do.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles