Question 1

What is the CSS cascade?

Accepted Answer

The algorithm that resolves conflicting declarations via origin, importance, specificity, and order. Cascade layers and inline styles participate too. Understanding it prevents !important wars and specificity traps.

Question 2

Explain specificity in simple terms.

Accepted Answer

IDs > classes/attributes/pseudo-classes > elements/pseudo-elements; inline beats all except !important. Equal specificity → source order. :where() has zero specificity; :is() takes most specific argument.

Question 3

What does !important do, and when is it justified?

Accepted Answer

Raises importance so normal rules lose; justified rarely for utilities/overrides/third-party escapes. Importance has its own cascade between origins. Prefer refactoring specificity/layers over spraying !important.

Question 4

Author vs user vs user-agent stylesheets?

Accepted Answer

Three origins; user !important can override author; UA provides defaults. Normalize/reboot styles manage UA differences. Accessibility user styles must be respected.

Question 5

What are cascade layers (@layer)?

Accepted Answer

Explicit control of cascade priority independent of specificity within layered rules. Unlayered styles beat layered. Great for resets → tokens → components → utilities ordering.

Question 6

How does inheritance differ from the cascade?

Accepted Answer

Inheritance passes computed values to children for inheritable properties; cascade resolves conflicts per element. Use inherit, initial, unset, revert intentionally. color inherits; margin does not.

Question 7

What is the difference between unset, revert, and revert-layer?

Accepted Answer

unset acts as inherit/initial; revert rolls toward user/UA; revert-layer rolls back within layers. Useful in component isolation and undo utilities. Know which 'previous' you mean.

Question 8

How do inline styles interact with classes?

Accepted Answer

Inline declarations have high specificity; only !important in stylesheets can override non-important inline. Prefer classes for maintainability. Inline for true one-offs or framework style bindings carefully.

Question 9

Shadow DOM and the cascade — what changes?

Accepted Answer

Shadow trees encapsulate styles; ::part and CSS variables pierce carefully; :host styles the host. Global selectors don't reach inside closed shadows. Design tokens via custom properties are common bridges.

Question 10

How would you debug a style that 'won't apply'?

Accepted Answer

Check specificity, layers, importance, invalid values, typos, and whether selector matches. DevTools Computed and Styles panes show crossed-out winners. Verify not overridden by later equal rules.

Question 11

What is @scope and why does it help?

Accepted Answer

Scopes selectors to a subtree/root to reduce leakage without heavy specificity. Helps component-local CSS in light DOM. Browser support considerations apply.

Question 12

Presentational class soup vs semantic classes — cascade implications?

Accepted Answer

Utility-first relies on order/layers; semantic BEM relies on low conflict and structure. Teams must pick conventions. Mixing without layers causes specificity fights.

Question 13

Design a cascade strategy for a multi-brand design system.

Accepted Answer

Tokens in low layers, components mid, brand overrides high, utilities carefully layered, document !important policy. Enforce via linting and Stylelint. Prefer tokens over one-off overrides.

Cascade CSS Interview Questions

Other CSS interview topics