What does "mobile-first" mean in a CSS stylesheet, and why does it favour min-width media queries over max-width ones?
answer
- one stylesheet, not a separate mobile site
- base rules describe the narrowest viewport
- min-width adds, max-width undoes
- block layout is already one column
- queries add nothing to specificity
basics
~10 sMobile-first means the unconditional base rules describe the narrowest layout, and min-width media queries add complexity as the viewport grows. Because narrow screens are the default, the stylesheet accumulates enhancements instead of overrides.
solid answer
~50 sMobile-first is an ordering convention inside one stylesheet, not a separate mobile site. I write the base rules — the ones outside any `@media` block — for the smallest viewport, usually a single column, which is close to what block layout gives me for free. Then I layer `@media (min-width: ...)` blocks that add multi-column layout, wider spacing and richer navigation as space appears. The desktop-first alternative, a wide base plus `max-width` queries, makes every small-screen rule an undo: unset a grid, shrink a font, re-hide something. Undo-rules are what make stylesheets grow and fight each other. Mobile-first also degrades gracefully — anything that does not apply the query still renders a usable single-column page. Note that media queries add no specificity, so in either direction it is source order that decides which matching block wins.
go deeper
Be ready to say plainly that the rules outside any @media block are the small-screen design and that min-width blocks add to it as the screen widens. Naming the direction correctly is most of the answer here.
Explain why the override count differs: a narrow base states less because block layout already stacks, while a wide base must be dismantled property by property. Mention that media queries contribute nothing to specificity.
Show judgment about when the convention bends — retrofitting a desktop stylesheet with max-width blocks is a legitimate call. Be able to describe the failure mode you are actually preventing: half-finished undo rules that stay inert until a layout changes.
Own it as a codebase-wide constraint rather than a personal habit: one direction enforced across the stylesheet, no per-property mixing, and a clear statement that query direction is about maintenance cost, not about what a device downloads.
## The terms first A **base rule** is a declaration block that sits outside any `@media` block, so it applies at every viewport width. A **media query** is an `@media` at-rule whose contents apply only while its condition matches — `@media (min-width: 48rem) { ... }` applies whenever the viewport is at least 48rem wide. "Mobile-first" describes which of those two carries the small-screen design: in a mobile-first sheet the base rules *are* the mobile design, and every media query is a widening enhancement. It is a convention about **authoring order inside one file**. It is not a separate `m.` site, not a separate stylesheet for phones, and not a rule about hiding content on small screens. ## Why the narrow layout is the natural base CSS already lays out block-level boxes as a full-width vertical stack. A single-column phone layout is therefore close to what the browser does with almost no instruction from you. A three-column desktop layout is not — it requires a grid or flex container, explicit track sizes, gaps and alignment. So the mobile-first base is short, and the queries add: ```css /* base: applies everywhere, describes the phone */ .layout { display: block; padding: 1rem; } /* enhancement: only from 48rem up */ @media (min-width: 48rem) { .layout { display: grid; grid-template-columns: 16rem 1fr; gap: 2rem; padding: 2rem; } } ``` The desktop-first version of the same design has to state the grid unconditionally and then dismantle it: ```css .layout { display: grid; grid-template-columns: 16rem 1fr; gap: 2rem; padding: 2rem; } @media (max-width: 47.99rem) { .layout { display: block; /* undo */ padding: 1rem; /* undo */ } } ``` Every property set in the wide base needs a matching undo in the narrow block. That asymmetry is the whole argument: **adding is cheaper than unsetting**, and unsetting is easy to do incompletely — you remember `display` and forget `gap`, and the leftover declaration goes unnoticed because it is inert until the layout changes again. ## Media queries and the cascade A common misreading is that a rule inside a media query is somehow stronger. It is not. Specificity is computed from the **selector alone**; the surrounding at-rule contributes nothing. When two matching declarations have equal specificity and sit in the same origin and cascade layer, the **later one in source order wins**. That is why a base rule written *after* a media block will override it, and why min-width blocks must be ordered from narrow to wide. ## The progressive-enhancement angle Because the base layout is the simple one, any context that does not apply the enhancements still gets something usable: a very narrow window, a reading mode, a rendering path that ignores the query. The failure mode of mobile-first is "less layout than intended". The failure mode of desktop-first is "a desktop layout crammed into 360px", which is the one that actually breaks. ## When desktop-first is defensible Retrofitting responsiveness onto an existing desktop-only stylesheet is a real case: the wide layout already exists and rewriting it as a base plus enhancements is a large refactor with no user-visible payoff. Adding `max-width` blocks is the pragmatic move. Both directions produce identical rendering — the difference is how many override rules you maintain, so pick the direction that gives the smaller override count for the design you actually have. What is not defensible is **mixing directions for the same property**, where the narrow and wide rules for one selector live in two overlapping query blocks and nobody can predict which one is in force. ## Two things it does not do Mobile-first does not reduce what a phone downloads — the browser fetches and parses the entire stylesheet including the rules for widths it will never hit. And it does not mean the mobile experience is a subset of the desktop one; content parity is a product decision, not a consequence of the query direction. ## What an interviewer is listening for That you can say "base rules are the small layout, queries add", that you know the queries add no specificity, and that you frame the choice as override count rather than as a fashion.
- Does writing mobile-first mean a phone downloads less CSS?No. Media queries gate *application*, not download — the browser fetches and parses the whole stylesheet, including every rule for widths that device will never reach. Mobile-first reduces the number of override rules you write and maintain, not the bytes on the wire. If you actually want a phone to fetch less, that is a delivery concern (splitting or conditionally loading stylesheets), not something the query direction gives you for free.
- Is there ever a good reason to write a desktop-first, max-width stylesheet?Yes — retrofitting. If a large desktop-only stylesheet already exists, rewriting its base as a narrow layout is a big refactor with no visible payoff, and adding `max-width` blocks is cheaper. The rendered result is identical either way; the metric is how many override rules you end up maintaining. What I avoid is mixing both directions for the same property on the same selector, because then no one can tell which block is in force.
- How would you handle an element that should only appear on wide screens in a mobile-first sheet?Keep it out of the base — `display: none` unconditionally — and turn it on inside the min-width block. That keeps the direction consistent: the query adds. The caveat is that `display: none` only removes it from layout, not from the document, so it is still downloaded and still reachable to some tooling; if the element genuinely should not exist on small screens, that is a markup or rendering decision rather than a CSS one.
saying these in an interview costs you the question
- Thinks mobile-first means a separate mobile site or stylesheet
- Says mobile-first is about hiding content on phones
- Believes rules inside a media query beat rules outside one
- Claims a phone downloads less CSS in a mobile-first sheet
- Mixes min-width and max-width blocks for the same property