For a couple of years our media queries have all been max-width based, styling for desktop first and overriding for smaller screens as an afterthought, the same pattern most of the tutorials and boilerplate we learned from used when we were starting out. This year we started flipping that on new projects, writing the smallest-viewport styles first and layering min-width media queries on top as the screen gets wider.
Writing the base styles for a narrow viewport first and layering min-width media queries on top forces a simpler starting layout, single column, larger tap targets, stacked navigation instead of a horizontal menu, and it's made us notice bloated desktop-first CSS we didn't realize we'd been writing out of habit. A desktop-first stylesheet tends to accumulate overrides, three columns by default, override to two, override to one, each override undoing work the previous rule did, whereas starting from the simplest layout and adding complexity as space allows means every media query is additive rather than corrective.
The concrete example that convinced us was a three-column feature grid on a client's homepage. Under the old desktop-first approach, the mobile version required three separate overrides stacked on top of each other by the time we got down to a phone-sized viewport, undoing the float, undoing the width percentage, undoing a margin that only made sense in the three-column layout. Rewritten mobile-first, the base styles were just a single stacked column, no floats at all, and the desktop three-column layout became one min-width media query adding the grid behavior on top, roughly a third of the total CSS the old approach needed for the same visual result.
It's not free of gotchas. Anything that needs to look meaningfully different at the largest breakpoint rather than just progressively enhanced, a background image that only makes sense at a certain aspect ratio, say, needs more deliberate thought under a mobile-first structure than it did when desktop was the unquestioned default, and we caught ourselves a couple of times writing a min-width query and then realizing we actually needed a narrower range in between for a specific tablet-sized layout that didn't fit neatly into a bigger-is-simpler progression.
It's a bigger mental shift than we expected for something that sounds like a small technical change, mostly because it means designing and thinking mobile-first too, not just writing the CSS in a different order, but the resulting stylesheets feel leaner, and clients reviewing the mobile version of a site earlier in the process, since it's now the default rather than an afterthought checked at the end, has genuinely caught a few layout problems earlier than our old process ever did.