CSS Interview Prep
CSS interview essentials: specificity order (inline > ID > class > element), what creates stacking contexts, Flexbox vs Grid differences, rem vs em, box-sizing: border-box, and which properties trigger layout vs paint.
CSS Interview Essentials Specificity order — inline > ID > class > element!important — overrides specificity (use sparingly)Cascade — importance, specificity, orderStacking context — created by opacity, transform, z-indexFlexbox vs Grid — flex = 1D; grid = 2Drem vs em — rem = root; em = parentRepaint vs Reflow — colour = repaint; layout = reflow (costly)
Test your understanding before moving on
1. CSS specificity order (lowest to highest)?
A. element < class < id < inline
B. class < element < id < inline
C. inline < id < class < element
D. All equal
💡 Specificity: element (0,0,0,1) < class (0,0,1,0) < id (0,1,0,0) < inline (1,0,0,0).
2. What does !important do?
A. Adds importance comment
B. Overrides specificity — applied regardless of selector
C. Makes property required
D. Speeds loading
💡 !important overrides normal specificity rules — use sparingly.
3. Flexbox vs Grid?
A. Flexbox = 2D; Grid = 1D
B. Both are 1D
C. Flexbox = 1D (line); Grid = 2D (rows and columns)
D. Grid is deprecated
💡 Flexbox handles one dimension (row OR column); Grid handles both dimensions simultaneously.
4. What is a stacking context?
A. Z-index value
B. A layer in which z-index works — created by transform, opacity, z-index, etc.
C. A CSS variable
D. A named layer
💡 A stacking context is an isolated z-index layer. Elements inside can't escape it.
5. Repaint vs Reflow?
A. Same thing
B. Repaint: visual change (color). Reflow: layout recalculation (much costlier)
C. Reflow is visual
D. Repaint is costlier
💡 Reflow (layout) is expensive — avoid triggering it in animations. Use transform/opacity instead.