首先通过选择器或媒体查询对样式进行分组

Question

假设我们有一个包含两个类、a 和 b 的样式表，每个样式表都在某个断点处发生变化：

.a {
  //styles
}

.b {
  //styles
}

@media (max-width: 768px) {
    .a {
      //mobile styles
    }
    .b {
      //mobile styles
    }
}

这些按断点分组。是否更喜欢按选择器对它们进行分组？即：

.a {
  //styles
}

@media (max-width: 768px) {
  .a {
    //styles
  }
}

.b {
  //styles
}

@media (max-width: 768px) {
  .b {
    //styles
  }
}

第二个看起来有点丑，但可以很容易地用 scss nested media queries 纠正。我对前一种模式的担忧是，它可以鼓励开发人员编辑一部分样式，而无需查看样式更改如何影响其他断点处的对应样式。但是，对于处理仅在特定屏幕尺寸下出现的问题的开发人员而言，前者可能更有用。

很想听听关于这种分组冲突的任何想法或思想流派 - 我一直在寻找关于 Smashing Magazine 或 CSS 技巧的任何资源，但没有找到任何东西。

Answer 1

经过大量研究，我个人得出了这个答案

在不同的断点处保持同一选择器的样式对开发人员体验来说是好的 - 它使CSS更易于维护，以便能够在断点处看到选择器的行为每个断点都在同一个地方。
在 vanilla CSS 中，执行此操作的模式可能有点丑陋和笨拙 - 如果不缩小，它还可能由于重复的媒体查询而导致一些性能问题。 裁定：避免在原版中对选择器及其媒体查询对应物进行分组CSS - 这可能比它的价值更麻烦。
如果您使用 SCSS，绝对将您的媒体查询嵌套在您的选择器中。它干净且更易于维护。通过正确的编译，您可以避免重复的媒体查询，从而避免前面讨论的性能问题。 Learn more here

Grouping styles by selector or media query first