sass - 媒体查询 scss 断点最佳实践

Question

我和我的团队领导就媒体查询的使用发生了一些争执。
关于使用媒体查询有两种方法(据我所知)。
方法一:

@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%;
  }
}

方法二:

.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%;
  }
}

我是一名初级开发人员，我发现第二种方法更容易使用和理解。但是我的老板告诉我使用第一种方法。老实说，我到处寻找使用我喜欢的第二种方法的示例项目，但找不到!
所以我的问题是为什么？
在我看来，如果我想在这个例子中添加一些类来包装容器，在方法 1 中我需要在每个断点中添加它，而在方法 2 中我只需要添加一次!
那么第一种方法如何才是正确的做法呢？我错过了什么？

Answer 1

我认为这是一个很好的问题，我经常觉得分歧是由习惯了 SASS 之前的生活并拒绝进入 SASS 和嵌套 CSS 的新时代的老派程序员造成的。
方法一

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.

方法二

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.

结论
这取决于实际情况。我不认为这是我的方式或高速公路类型的场景，它是两者的混合。
在构建组件时，您通常希望将 CSS 保留在一个块中，例如 方法一 .但是，当您诊断已组合在一起的整个站点并为特定元素插入单个断点时，使用 开始变得更有意义。方法二 .
我发现我们创建的网站越多，我就越擅长找出最适合这种情况的方法，而上述规则往往会引导我走向正确的方向。