The path of least resistance

When it comes to media queries, there are two terms that you hear tossed around a lot:

• Mobile-first
• Desktop-first

Most people tend to pick one and use it. Some people are very defensive about why one approach is better than the other.

As far as I’m concerned, they’re both correct, it just depends on the situation, which is why I’m an advocate for what I call The Path of Least Resistance.

All that means is, which approach can I use to write the least amout of code (which generally also means it’s more maintainable).

From my experience, in most situations, a mobile-first approach does work here, because we tend to add complexity as the viewport gets larger and we have more room to work. Things stack by default, which works well on mobile devices and other small screens, and then we can use a media query to add complexity at larger sizes.

However, there are situations where small viewports have more complex layouts, with the most obvious example being a navbar.