CSS & Styling
CSS is a declarative language: you do not write how to paint an element, you declare rules and the engine resolves the conflicts between them. Hence the name — Cascading Style Sheets: when several rules target one element, the cascade picks the winner by specificity, importance, and order. For a JavaScript engineer this is a foreign model — there is no explicit execution order and no calls, which is exactly why CSS "flows" in surprising ways.
Three things reliably trip candidates up. First, the box model: by default width sizes only the content, while padding and border add on top and the box swells. Second, specificity: it is a tuple of several ranks, not a single point, so one id outranks any number of classes. Third, CSS-in-JS: the convenience of colocating styles with code is not free — it has a runtime cost. Each mechanism is broken down in the layers below.
Topic map
- CSS fundamentals & the cascade — what a rule is made of, how the cascade and inheritance work, and what resolves a conflict.
- The box model — the four box layers and what
box-sizingchanges betweencontent-boxandborder-box. - Spacing and gap — why
gapon the container beatsmarginon every item. - Selector specificity — the specificity tuple, tie-breaking by source order, and the role of
!important. - CSS-in-JS — styles in JavaScript via styled-components — the pros, the runtime cost, and the zero-runtime approach.
- Design tokens — named, platform-agnostic design decisions and how a token differs from a CSS variable.
Common traps
| Mistake | Consequence |
|---|---|
Thinking border-box is the default | The default is content-box, so padding and border swell the box beyond the declared width |
Confusing padding (inside) with margin (outside) | Spacing appears in the wrong place; fixes become guesswork |
| Treating specificity as one number | Three classes do not beat one id — the tuple's ranks never carry over |
| Thinking source order beats specificity | The more specific rule wins regardless of where it is written |
Putting margin on every flex item | You end up patching the last child and fighting margin collapse; gap solves it with one property |
| Assuming CSS-in-JS is free | Runtime injection and recompute at render, plus SSR and hydration complexity |
| Equating a design token with a CSS variable | You lose the token's semantic layer and platform independence |
Interview relevance
CSS questions in a JavaScript-engineer interview probe your grasp of the model — the cascade, the box model, specificity — not memorized properties. A candidate who explains specificity as "a tuple of ranks compared left to right, with source order breaking a tie" immediately gets ahead of one who only remembers "id beats class".
Typical checks:
- What a CSS rule is made of and how the cascade picks a winner on conflict.
- The four box-model layers and what
box-sizingchanges. - How specificity is computed and what wins on an exact tie.
- The pros and cost of CSS-in-JS; how a design token differs from a plain variable.
Common wrong answer: "specificity is a sum of points, so three classes beat one id". In fact specificity is compared rank by rank: the id rank outranks the class rank wholesale, and no number of classes can ever "reach" a single id.