Describe the full CSS cascade precedence order

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: developer.mozilla.org