<story><title>Mobile-First CSS: Is It Time for a Rethink?</title><url>https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/</url></story><parent_chain></parent_chain><comment><author>jacobr</author><text>I’ve found that a significant number of media queries can be replaced by fluid rules instead. E.g. instead of setting padding and full width on a container for mobile and a fixed width on desktop, do this for all breakpoints&lt;p&gt;&lt;pre&gt;&lt;code&gt;  width: min(calc(100wv - 2rem), 80rem)
&lt;/code&gt;&lt;/pre&gt;
Instead of resizing text for different breakpoints, use&lt;p&gt;&lt;pre&gt;&lt;code&gt;  font-size: clamp(2rem, 4vw + 1rem, 3rem);
&lt;/code&gt;&lt;/pre&gt;
etc. No media queries needed. I also find it easier to reason about since you don’t have different rules applying in different circumstances.</text></comment>
<story><title>Mobile-First CSS: Is It Time for a Rethink?</title><url>https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/</url></story><parent_chain></parent_chain><comment><author>nojs</author><text>Having done a lot of both ways, I am still a fan of mobile first. Otherwise inevitably the mobile site ends up being an afterthought, with retrofitted elements that almost but don’t quite work on mobile (often everything on the desktop page is just stacked, and it doesn’t quite work but it’s hard to put your finger on why). This rarely happens in reverse, because the default lazy desktop implementation is just that it’s “too simple” which is generally much less of a problem. It’s more obvious when something needs to be added than when it needs to be simplified or removed.</text></comment>