What does 'mobile-first' mean in CSS, and why write min-width queries rather than max-width?
Whether you build up from a simple base rather than patching a desktop layout down.
Mobile-first means the BASE (unqualified) styles target the smallest screen — a single column, full-width, stacked — and you layer complexity with min-width media queries as more space becomes available. Writing min-width (rather than max-width) matches this additive direction: each breakpoint only ADDS rules, so you never fight and undo desktop styles on small screens. Benefits: small devices (often the weakest, on the worst networks) get the leanest CSS and don't parse rules meant for large screens; the cascade stays additive and easy to reason about. Choose breakpoints by where YOUR content breaks, not by specific device widths — resize until the layout looks bad, put a breakpoint there. Always include <meta name='viewport' content='width=device-width, initial-scale=1'> or mobile browsers render at a fake 980px. Media queries also cover capability and preference: prefers-color-scheme (dark mode), prefers-reduced-motion (disable animations for users who ask), pointer/hover (touch vs mouse), and orientation. Modern container queries (@container) let a component respond to its OWN width instead of the viewport — better for reusable components.
Any layout serving phones and desktops: start with the stacked mobile base, enhance up at min-width breakpoints.