Describe the full CSS cascade precedence order
This tests deep cascade knowledge beyond specificity. A strong answer lists the six origins in order, notes !important reverses them, then layers, specificity, and source order.
What's really being asked
This question probes whether you treat the cascade as a holistic precedence algorithm or merely a specificity tie-breaker. Senior engineers should know that origin and importance are evaluated before specificity enters the picture, and that modern CSS introduces cascade layers and scope blocks as additional steps.
The full answer
A precise answer walks through the cascade in strict order. First, list the origins by default precedence from lowest to highest: user agent styles, user styles, and author styles. Then note that !important reverses this order so that author !important, user !important, and user agent !important ascend in precedence. Second, explain that within each origin, cascade layers defined by at-layer rules create sub-precedence, with unlayered styles acting as a final layer. Third, state that when origin, importance, and layer are equal, specificity is calculated, with inline styles beating IDs, IDs beating classes and attributes, and those beating elements. Fourth, source order is the ultimate tie-breaker only when all previous factors are identical. Fifth, mention that proximity in scoped styles and inherited values are resolved separately.
The mistakes people make
A major red flag is saying specificity trumps origin, which is false; an author rule with low specificity overrides a user-agent rule with high specificity. Another error is describing !important as a specificity boost rather than an importance flag that flips origin order. Candidates who omit cascade layers reveal they are not current with modern CSS. Finally, placing source order before specificity shows a fundamental misunderstanding of the algorithm.
What usually comes next
An interviewer might ask how layer interacts with !important, or why user !important exists for accessibility. They may also ask how inline styles compare to !important author rules, or how scope proximity alters the cascade. Be ready to explain when you would intentionally use layers to manage third-party CSS precedence.
A concrete example
Imagine a button with a user-agent stylesheet setting color to black, an author rule setting the button color to blue, and an author !important rule setting color to red. Even if the user-agent selector has higher specificity, the author origin wins. If a user stylesheet declares color green with !important, that beats the author !important because user !important outranks author !important. If two author rules both target the button with equal specificity, the one declared last in source order applies, but only after origin, layer, and specificity are already tied.
Interview question
A user-agent stylesheet sets a button to black with a high-specificity selector, and an author stylesheet sets it to blue with a low-specificity selector. What is the final color?
- a.Black, because the user-agent selector has higher specificity and specificity always trumps origin.
- b.Blue, because author styles originate from a higher origin than user-agent styles, and origin is evaluated before specificity.Correct
- c.Blue, but only if the author rule is declared later in the stylesheet; otherwise black.
- d.Black, because user-agent styles are the default and require an author !important rule to override.
Why? this is the answer
The cascade evaluates origin before specificity, so an author rule always beats a user-agent rule regardless of selector weight. Option A represents the common misconception that specificity trumps origin, while D incorrectly invokes source order when origin already differs.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #cascade
- #specificity
- #frontend
- #design-systems
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
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