Explain the mobile-first approach and how it differs from desktop-first

WHAT THIS TESTS: This question tests whether you treat responsive design as a CSS execution strategy rather than a visual design preference. The interviewer wants to see that you understand progressive enhancement in the cascade, the directional difference between min-width and max-width media queries, and the performance implications of default styles versus overrides.

A GOOD ANSWER COVERS: First, define mobile-first as progressive enhancement for CSS. The base stylesheet contains the smallest viewport styles with no media query, and you add complexity using min-width breakpoints such as 48rem or 64rem. Second, contrast this with desktop-first, where the base stylesheet contains the full desktop layout and you carve out smaller experiences using max-width queries. Third, explain the structural consequence. Mobile-first tends to produce fewer overridden rules because you are adding, whereas desktop-first often requires undoing padding, multi-column grids, or hover states that do not belong on touch devices. Fourth, mention that because the base styles are the small-screen styles, constrained devices parse the leanest possible CSS before any query matches.

COMMON WRONG ANSWERS: A red flag is describing mobile-first as merely creating the phone mockup before the desktop mockup in a design tool. Another is claiming that mobile-first means you ignore desktop users or that desktop-first is always wrong. Senior interviewers expect nuance. A third is confusing the query direction, such as saying mobile-first uses max-width to hide desktop elements, which actually describes a desktop-first override pattern.

LIKELY FOLLOW-UPS: The interviewer may ask when desktop-first is still appropriate, for example when retrofitting a legacy admin dashboard or when the audience is almost entirely desktop. They may also ask about container queries and whether they change the equation, or how this approach interacts with server-side rendering and critical CSS.

ONE CONCRETE EXAMPLE: Imagine a card component. In mobile-first CSS you write display block, padding 1rem, and a single column as the default. Then at min-width 48rem you add display grid and grid-template-columns repeat 2 1fr. In desktop-first CSS you would start with the grid and then at max-width 47.99rem override back to block and remove the grid gap. The mobile-first version has fewer reversals and smaller specificity battles.

Source: developer.mozilla.org