非常好的问题，我认为这值得一个完整的话题，这个答案有助于@Unbrand 分享的所有内容。
在决定哪个更好或最佳实践之间，我认为这里没有对错之分。坚持一个并不意味着一切都是正确的，这完全取决于造型师习惯的方法，最重要的部分是它的使用方式，成败都在这里。
我想你已经知道并熟悉这两种方法的最终编译 CSS，当然最终的 bundle 大小也是优化的一个考虑因素。
这就是方法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 的编译方式，你可能会清楚地看到重复的字符串。扩大到实际项目，这可能是需要考虑的事情。
方法 2 CSS：
.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 年之前，并且可能每个响应式查询都将位于单独的文件中。例如：
responsive.mobile.scss
@media screen and (max-width: 768px) {
// All the stuff
}
responsive.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 的人，他有自己的观点。这完全取决于您的特定项目范围，哪种方法可能比另一种更好。