为每个CSS类单独编写media query是否会导致网站加载速度变慢？

你提到的第一种分散式media query写法如下：

.class1 {
   /* rules */
}  

@media only screen and (max-width: 800px) {
  .class1 {
     /* rules */
  }
}

.class2 {
 /* rules */
}

@media only screen and (max-width: 800px) {
  .class2 {
     /* rules */
  }
}

行业通用的合并式写法如下：

.class1 {
   /* rules */
}

.class2 {
   /* rules */
}

@media only screen and (max-width: 800px) {
  .class1 {
     /* rules */
  }
  .class2 {
     /* rules */
  }
}

性能相关结论 #

分散编写同断点的media query几乎不会对网站运行速度造成可感知的影响，完全可以根据开发习惯自由选择。

具体说明 #

• 浏览器解析成本可以忽略：浏览器处理CSS时，不管media query是分散还是合并，最终都会统一提取所有匹配当前视口的样式规则参与选择器匹配，重复的media query声明本身的解析开销极低，普通项目里的重复量完全达不到影响性能的阈值。
• 体积差异几乎可以无视：分散写法唯一的劣势是会多出来若干字节的重复media query声明代码，但CSS经过gzip/brotli压缩后，这类重复字符串会被高度压缩，最终体积差可以忽略不计，不会影响资源加载速度。
• 现有工具可以抹平差异：如果实在在意这部分冗余，前端生态的postcss有专门的postcss-combine-media-query插件，可以在生产构建时自动把所有分散的同断点media query合并成统一块，开发时用分散写法、上线后自动转成合并写法，不需要在开发阶段纠结取舍。

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