CSS is the topic I see experienced engineers underestimate the most. People spend weeks on JavaScript puzzles, then get asked why a z-index: 9999 isn’t working and freeze.
CSS questions show up in trivia rounds, and they come up constantly during UI builds when your layout doesn’t do what you expect with an interviewer watching. Here are the ones that trip people up, with the explanation I’d give.
1. “How does the browser decide which CSS rule wins?”
Most people jump straight to specificity, but it’s actually the third check. The browser first looks at origin and !important, then inline styles and cascade layers, then specificity, and only then source order.
For specificity, think of it as three numbers (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements) compared left to right:
#nav a /* (1, 0, 1) */
.nav .link /* (0, 2, 0) */
.nav a:hover /* (0, 2, 1)... premium content.
