媒体查询：覆盖 CSS 规则与定义特定于屏幕的 CSS 规则答案

【问题标题】：Media queries: Overriding CSS rules vs defining screen specific CSS rules媒体查询：覆盖 CSS 规则与定义特定于屏幕的 CSS 规则
【发布时间】：2022-02-15 17:18:21
【问题描述】：

我假设，就像链接标签中使用的媒体查询一样，我们在 CSS 文件中定义的媒体查询被浏览器根据其媒体查询规则解析/覆盖或省略（实际上我知道，尽管带有不匹配媒体的链接标签请求的 CSS 文件无论如何都会被下载，但它们并没有呈现阻塞浏览器）。那么，从 CSSOM 构建优化的角度来看，将适用于所有屏幕设备的通用 CSS 规则与特定于移动设备的 CSS 规则分开并将特定于移动设备的规则封装在最大宽度媒体查询中不是更好吗？这样浏览器将解析更少的 CSS 来构建 CSSOM，而无需为平板电脑、台式机等覆盖它们。我想知道这是否会影响 CSSOM 性能的构建还是只是矫枉过正？

【问题讨论】：

标签： css media-queries cssom

【解决方案1】：

<link> 带有不匹配媒体查询的标签以低优先级下载，这样它们就不会阻止页面呈现，但仍会被下载以便在媒体属性发生变化时可用（例如通过旋转智能手机或通过缩放出桌面浏览器）。为不同的媒体类型使用单独的样式表是有好处的，但创建多个 HTTP 请求也有一个缺点。

样式表中的媒体块已经下载，我会假设它们无论如何都已编译，因此它与标签中的媒体查询并不完全相同。但是，如果某组规则仅与某个宽度相关，并且总是在更宽的屏幕中被覆盖，那么通过将其封装在媒体查询中来告诉浏览器是有意义的。这不仅仅是关于原始页面的渲染，还包括对需要重绘的窗口或 DOM 的任何更改 - 浏览器需要评估的规则越少，它就会越快。

【讨论】：

感谢您的回答，诺姆。是的，我知道从文件获取的角度来看它不会影响性能。我真正想知道的是，如果浏览器只是省略了不匹配的媒体块而不是在构建 CSSOM 期间解析它们，那么在媒体块内指定移动特定规则而不是将它们写成通用然后覆盖它们可能是有益的稍后将它们用于平板电脑或台式机，这样我们可以减少渲染时间吗？如果是这样，是否值得这样做？
我不知道浏览器究竟是如何实现这一点的，而且它甚至可能在浏览器或版本之间不一致。然而，浏览器至少对整个语法进行基本解析，即使只是为了可靠地确定媒体相关块的结束位置。此外，JS 可能会查询 CSSOM，无论是否匹配了哪些规则——它真的就像一个当前不存在于 DOM 中的类。所以我猜一切都被编译成某种形式的 CSSOM。但是评估是另一回事，您可以通过将属性包含在媒体查询中来避免不必要的属性评估。