Recently there's been some discussion on max-width vs min-width media queries in CSS. I'd like to articulate why I think that only min-width adheres to the "Mobile First" philosophy and is a preferable approach.

So, let's first break down what it means to be "Mobile First". This is a term that comes with a lot of baggage and transcends content strategy, culture, design, and much more. I'd like to avoid a lot of that for brevity's sake. For the purposes of this article, "Mobile First" can be boiled down to:

Everything starts with mobile

More or less.

So, how does this relate to media queries?

Media queries are used to restrict CSS to particular viewport sizes. A max-width media query ensures that CSS isn't applied unless a viewport size is less than or equal to a given dimension. A min-width media query applies CSS to a viewport size that is greater than or equal to a given dimension.

A `min-width` approach

I typically structure my CSS and their associated media queries using an overriding approach.

.container {
  margin: .5rem auto;
}

@media screen and (min-width: 32rem) {
  .container {
    margin: auto auto;
    max-width: 32rem;
  }
}

@media screen and (min-width: 64rem) {
  .container {
    max-width: 64rem;
  }
}

It optimizes for mobile

This addresses one of the primary constraints of mobile devices. They don't have the same performance and rendering ability that a standard desktop browser does, so why force them to parse unused CSS? Using min-width allows them to ignore the query's CSS entirely.

It ensures mobile is the first consideration

This ensures that your initial CSS rulesets are intended to be rendered by mobile devices, subsequently redressing the layout and styling for larger viewports with media queries. This forces you to think about starting with a compacted mobile design, and then designing outwards. It's a progressive disclosure based on viewport size.

A `max-width` approach

This begins with a global class for the largest width, and then adds additional rules for smaller viewports.

.container {
  margin: auto auto;
  max-width: 64rem;
}
@media screen and (max-width: 64rem) {
  .container {
    max-width: 32rem;
  }
}

@media screen and (max-width: 32rem) {
  .container {
    margin: .5rem auto;
    max-width: none;
  }
}

This approach uses a desktop first paradigm because the initial class provides rules intended for large viewports. Then applies rules as a viewport shrinks. This requires a developer to envision a desktop design, and then how it is modified for smaller viewports.

This isn't an optimal approach because it requires devices with smaller screens to handle more ruleset overrides when rendering. This should be avoided because smaller screens typically mean mobile devices. Mobile devices don't have the same horsepower that desktops do. So, why should they be handling the media query logic?

tl;dr

The resulting CSS from both approaches is pretty straightforward. Neither adds or removes complexity in my contrived example. Neither results in more code (I challenge you to find a counterexample). It really just comes down to philosophies. min-width is the approach that begins with mobile, and then mutates with viewport size. That's "Mobile First".

Ultimately, either approach has merit, and I'm not saying max-width shouldn't be used. In fact, I'm sure there are times where it makes the most sense. I just hope that users are kept in mind, and the primary factor, when making these decisions.

johno/max-width-is-not-mobile-first.md