CSS样式优先按选择器或媒体查询分组的相关问题咨询

两种写法的核心差异 #

你提到的两种写法对应CSS样式组织的两种主流思路：

• 按断点分组：所有媒体查询规则统一收拢，相同断点下的所有选择器样式放在一起

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

各自的适用场景 #

按断点分组适合以下场景 #

• 小型静态项目、临时响应式适配迭代：如果项目样式体量小，且当前工作是统一调整所有元素的移动端表现，按断点分组可以不用跳转多个代码位置，一次性完成所有适配修改，效率更高。
• 全局样式重置、通用基础类适配：比如针对全局的字体、边距基础类做响应式调整，按断点分组可以更清晰的看到所有通用规则在不同断点下的表现。

按选择器分组适合以下场景 #

• 组件化架构项目：这是目前前端行业的主流选择，不管是Vue、React还是Web Component架构，每个组件的样式都是独立维护的，把同一个组件相关的所有响应式规则收拢在一起，维护组件时可以直观看到该组件在所有断点下的样式表现，不会出现漏改某一个断点规则的问题。
• 中大型多人协作项目：按选择器分组符合代码高内聚的原则，开发者维护单个模块/组件时不需要关心全局其他模块的样式，也不会因为修改全局媒体查询块里的规则意外影响其他组件的样式。

你提到的按选择器分组写法杂乱的问题，可以通过Sass/Less等预处理器的嵌套语法解决，编译后的最终CSS会被构建工具自动合并重复的媒体查询规则，和手动按断点分组的写法在性能上没有任何差异。

行业通用设计思路 #

两种写法没有绝对的对错，核心是要在项目里统一规则，不要两种写法混用：

• 如果是组件化的中大型项目，优先选择按选择器分组的方式，配合预处理器嵌套语法优化书写体验。
• 如果是简单的小型静态页面，或者临时做全局响应式适配，可以选择按断点分组的方式提升效率。

内容的提问来源于stack exchange，提问作者Christian May