Media Query scss breakpoints best practice

Question

I have a bit of a brawl with my team leader about the usage of media queries. There are 2 methods (from what i can tell) about using media queries.

Method 1:

@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {
  .container {
    width: 90%;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    width: 80%;
  }
}

Method 2:

.container {
  @media only screen and (max-width: 600px) {
    width: 100%;
  }

  @media only screen and (min-width: 600px) {
    width: 90%;
  }

  @media only screen and (min-width: 768px) {
    width: 80%;
  }
}

I'm a junior developer and I find it easier to use and understand the second method. Yet my Boss tells me to use the first method. To be honest, I've looked everywhere for an example project that use the second method that I like, but couldn't find!

So my question is why?

In my opinion if I want to add some class to wrap the container in this example, in method 1 I need to add it in every single breakpoint, while in method 2 I just need to add it one time! So how is the first method is the right practice? what am I missing?

Answer 1

I think this is a great question and I often feel like the divide is caused by old school coders who are used to life before SASS and refuse to move into the new age of SASS and nested CSS.

Method 1

Pros

You can put every media query for a break point into a single place so it's easier to find an diagnose when you want to make multiple changes to a page template.

Cons

It's messy and you end up with multiple class declarations all over the place, so when it comes to editing one element or adding a new element into the HTML you end up having to edit CSS across multiple areas which is harder to track.

It involves a hell of a lot of scrolling up and down to find the media query in question and then edit that single class element.

Method 2 — Jamie Murphy calls this paradigm Media Query Bubbling analogous to Modular CSS techniques like Block__Element--Modifier (BEM)

Pros

Everything is kept together in one place, it's easy to see to find a class and edit all of the breakpoints that are used in it.

It's also possible to quickly add new breakpoints to apply quick fixes

It's also easier to read and understand at a quick glance.

Cons

Old school developers may not like it!!

Sometimes it's not good. If you have a fixed template and you know it's not going to change. Putting the entire CSS for the whole page or area makes it a lot easier to work with. You can edit multiple classes for a single breakpoint all in one place.

Conclusion

It depends on the situation. I don't think that it's a my way or the highway type of scenario, its a mixture of both.

When building components you often want to keep the CSS in one block like in Method 1. But when you're diagnosing a whole site that's been put together and are inserting single breakpoints for specific elements, it starts to make more sense using Method 2.

I've found that the more sites we create the more I've become adept at figuring out what method is best for that situation and the rules above tend to guide me in the right direction.