媒体查询 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

非常好的问题，我认为这值得一个完整的主题，这个答案对@Unbranded 分享的所有内容都有贡献。

我认为，在决定哪种做法更好或最佳做法时，这里没有对错之分。坚持一个并不意味着它都是正确的，这完全取决于造型人员习惯的方法，最重要的部分是它是如何使用的，成败都在这里。

我想你已经知道并熟悉这两种方法最终编译的CSS，当然最终的包大小也会是优化时的考虑因素。

这就是方法 2似乎失去意义的地方。

方法 2 SCSS：

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

  &.red {
    @media screen and (min-width: 768px) {
      background: red;
      width: 75%;
    }
  }
}

这就是上面的 CSS 的编译方式，您可能会清楚地看到重复的字符串。扩展到实际项目时，这可能是需要考虑的事情。

方法2CSS：

.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container {
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .container.red {
    background: red;
    width: 75%;
  }
}

M1您主要会在旧项目中看到，可能会回到 2015 年之前，并且可能每个响应式查询都将位于单独的文件中。例如：

响应式.mobile.scss

@media screen and (max-width: 768px) {
  // All the stuff
}

响应式.tablet.scss

@media screen and (min-width: 768px) and (max-width: 1024px) {
  // All the stuff
}

过去，我处理过一个项目，当你有 4 个响应式查询时（另外，视网膜或纵向/横向它有自己的位置），这样的响应式事情就变成了一场噩梦。您有勇气维护这样的项目，您不知道一项更改可能会影响其他更改，并且由于某种原因您的客户改变了主意。在像他也想要适用于纵向平板电脑的移动样式的情况下，我相信您知道这会导致什么结果。

所以，M2挽救了局面。

在现代的 Web 应用程序时代，事物变得“组件化”，我认为M1不再有帮助，并且出于某种原因，你会看到很多 FE 教程提出M2，原因很简单。它很干净，而且直接切入主题。忘记在响应式上下文之间切换吧，这种方法证明了 FE 人员调整他的风格方式的帮助。

方法 2 与新手/初级人员一起使用

由于其简单，M2变得很熟悉，直到它的用途出现错误。

实际上，M1是关于在多个位置/文件中拥有该样式。每个响应式样式都位于其自己的文件中，而M2是关于组件的样式，其中所有样式都位于一个位置。

想想这个场景，这也成为维护的噩梦：

方法 2 响应式查询混合不良

.container {
  width: 100%;

  .button {
    background: red;

    @media screen and (min-width: 768px) {
      background: green;
    }
  }

  &.red {
    background: red;
    
    @media screen and (min-width: 768px) {
      background: darken(red, .15);
      width: 75%;
    }
  }
  
  @media screen and (min-width: 768px) {
    width: 50%;
  }
}

方法 2 与响应式查询的良好混合

.container {
  width: 100%;

  .button {
    background: red;
  }

  &.red {
    background: red;
  }
  
  @media screen and (min-width: 768px) {
    width: 50%;

    .button {
      background: green;
    }

    &.red {
      background: darken(red, .15);
      width: 75%;
    }
  }
}

第一个块是新人第一次尝试M2时会尝试的内容，但不知道最终结果。该示例仅附带一个媒体查询，请考虑多个查询。

当然第二个是有过M2造型经验的人，很清晰也更容易维护。

就我个人而言，我是那个曾经使用M1的人，现在在我的作品中完全转向M2 。我的大多数项目样式的比例为 7:3，其中 70% M2用于特定组件，30% M1用于全局/通用样式。我发现这最有效。更不用说现在我们还在游戏中引入了 JCSS 或样式组件。

如前所述，您的团队领导可能是一个曾经在方法 1 中看到 CSS 的人，他有自己的观点。这完全取决于您的特定项目范围，哪种方法可能比另一种更有效。

Answer 2

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

方法一

优点

您可以将断点的每个媒体查询放在一个位置，以便在您想要对页面模板进行多项更改时更容易找到诊断。

缺点

这很混乱，而且您最终会在所有地方都有多个类声明，因此当涉及到编辑一个元素或向 HTML 中添加新元素时，您最终不得不跨多个难以跟踪的区域编辑 CSS。

它涉及大量上下滚动以找到有问题的媒体查询，然后编辑该单个类元素。

方法二

优点

所有东西都放在一个地方，很容易找到一个类并编辑其中使用的所有断点。

还可以快速添加新断点以应用快速修复

快速浏览也更容易阅读和理解。

缺点

老派开发商可能不喜欢它！！

有时并不好。如果你有一个固定的模板并且你知道它不会改变。为整个页面或区域放置整个 CSS 使其更容易使用。您可以在一处编辑单个断点的多个类。

结论

这取决于实际情况。我不认为这是我的方式或高速公路类型的场景，它是两者的混合。

在构建组件时，您通常希望像方法 1一样将 CSS 保留在一个块中。但是，当您诊断已组合在一起的整个站点并为特定元素插入单个断点时，使用方法 2开始变得更有意义。

我发现我们创建的网站越多，我就越擅长找出最适合这种情况的方法，而上述规则往往会引导我走向正确的方向。