CSS Module 3
The cascade, specificity and layers interview questions
Interview questions on the cascade, specificity and layers: warm-ups, then what each harder question tests and how a good answer starts.
Warm-up questions
Short questions with short answers, each answered in full.
-
Fresher to mid
What steps does the cascade use to decide which declaration wins?
-
Fresher to mid
What is the difference between initial, unset and revert?
Answered in the lesson Inheritance, global keywords and computed values
Questions with model answers
What each question tests, the first step of a good answer and the follow-ups to expect.
-
Mid to senior
A ten-year-old stylesheet has 140 !important declarations, and every new fix adds another. How do you remove them without visual regressions, and which ones would you keep?
- What it tests
- Treating !important as a move to another cascade level, the escalation it causes, layers and specificity as replacements, and a measured refactoring process.
- First step
- Take an inventory before changing anything: group the 140 by why they exist, such as beating a vendor's selector, beating an ID, utilities and state classes, because each group has a different replacement. Then record a baseline of screenshots or computed styles, so that every removal can be checked.
- Follow-ups
-
- Which !important declarations are legitimate?
- How do cascade layers replace most of them?
- How do you prove that nothing changed?
- What do you do about !important in third-party CSS?
From the lesson The cascade: which declaration wins
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Fresher to mid
After a redesign set body { font-size: 16px; line-height: 1.5em; }, two-line headings overlap and footnotes look double-spaced. Explain the cause with numbers, give the fix, and say what 150% or 24px would do instead.
- What it tests
- Inheritance of computed values, numbers against lengths for line-height, and reasoning with concrete sizes.
- First step
- Work out what each element inherits. 1.5em on the 16px body computes to 24px, a length, and every descendant inherits 24px, so a 32px heading gets lines 0.75 times its font size and 12px footnotes get lines twice theirs.
- Follow-ups
-
- Why does a unitless number behave differently?
- What does getComputedStyle() show for the heading's line-height?
- When is a fixed line-height the right choice?
From the lesson Inheritance, global keywords and computed values
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
-
Mid to senior
You ship an embeddable widget that must look the same on any host page. How do you protect it from inherited and host styles, and what do all: initial, all: unset and all: revert each leave unprotected?
- What it tests
- Inheritance, the CSS-wide keywords and the all shorthand, the limits of isolation in one document, and when shadow DOM or an iframe is the better tool.
- First step
- Separate the two threats: inherited text properties flowing into the widget, and host selectors that match the widget's own elements. all: initial on the widget's root stops the first. Only a stronger cascade position or a shadow root protects against the second.
- Follow-ups
-
- Why does all: initial need display written after it?
- Which properties does all leave alone?
- When are shadow DOM or an iframe the better tools?
From the lesson Inheritance, global keywords and computed values
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes