CSS Interview Questions & Answers

THE QUESTIONS

Real questions, senior answers

1. 01

   What is the difference between em and rem?

   Both are relative units. em is relative to the parent element's font size; rem — the r is for root — is relative to the html element's font size.

   rem gives you predictable sizing regardless of nesting; em compounds through the tree.

   Relative unitsResponsive sizing
2. 02

   Can you explain the CSS box model?

   Every element is a box: content at the center, padding around it, then border, then margin. The content width is either computed from content or set explicitly.

   Backgrounds cover content and padding, not margin. Box shadows render outside the border, in the margin's space.

   If you master one CSS answer, make it this — it's the most important CSS question in any interview and half the practical questions reduce to it.

   Box modelPadding vs margin
3. 03

   What is CSS specificity, and how does the browser use it?

   When multiple rules target the same element, the browser scores each selector — inline styles beat IDs, IDs beat classes, classes beat tags — and applies the highest score. !important overrides them all.

   So a #navbar ID rule wins over a .nav-item class rule on the same element, no matter their order in the file.

   SpecificityCascade!important
4. 04

   CSS is a global namespace — what problems does that cause at scale?

   One team's generic selector silently restyles another team's components. Nobody notices until production.

   The classic defenses: BEM naming conventions for scoped, nested class names — or CSS-in-JS, where generated unique class names make specificity conflicts impossible.

   BEMCSS-in-JSScoping
5. 05

   What is critical CSS?

   The subset of CSS needed to render the above-the-fold view. CSS blocks rendering by design, so shipping less of it up front makes the first paint faster.

   Extract the critical rules, inline them in the HTML, and load the rest after the initial render — no extra blocking request, no layout shift.

   Critical rendering pathAbove the foldCLS
6. 06

   How do you manage CSS in a large application?

   Three moves. Scope your styles (BEM or CSS-in-JS) so teams can't break each other. Extract styles into cacheable stylesheets served from a CDN — CSS buried in the JS bundle can't be cached separately.

   And split design-system CSS from feature CSS: the design system changes rarely, so it can carry a long cache policy while feature styles iterate.

   CDN cachingDesign systemStyle extraction