首先按选择器或媒体查询分组样式

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嵌套媒体查询。我对前一种模式的担忧是，它可以鼓励开发人员编辑样式的一个部分，而不考虑样式更改如何影响其他断点上的对应部分。然而，前者可能更有用的开发人员工作的问题，只出现在特定的屏幕尺寸。

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

Answer 1

在做了充分的研究之后，我个人得出了这个答案

1. 在不同的断点保持相同选择器的样式对于开发人员的体验来说是很好的-它使CSS更易于维护，能够在同一位置看到每个断点处选择器的行为。
2. 在普通的CSS中，这样做的模式可能有点丑陋和笨拙——如果它不被最小化，它也可能导致一些性能问题，因为重复的媒体查询。的裁决:避免在普通CSS中对选择器和相应的媒体查询进行分组——这可能比它的价值更麻烦。
3. 如果你使用SCSS，绝对嵌入你的媒体查询在你的选择器。它干净，更容易维护。通过正确的编译，您可以避免重复的媒体查询，避免前面讨论的性能问题。点击这里了解更多信息