跳转到文章
Performance2026年10月20日阅读约 1 分钟

读懂 CSS 分析报告:检查未使用样式、重复规则与选择器权重

检查 CSS 报告中的未使用样式、重复声明和选择器权重。结合不同屏幕宽度与交互状态验证修改,避免误删必要的规则。

放大镜下的 CSS 图层和页面布局

CSS 分析会检查样式的数量、使用情况以及选择器权重(specificity)。报告中的“未使用”表示某条规则未在本次检查的页面状态下使用。它仍可能在打开菜单或改变窗口宽度后发挥作用,不应立即删除。

确定要检查的页面和交互

选择包含不同界面元素的页面,例如共用页头、商品列表或输入表单。除了初始状态,还要检查打开菜单、显示表单错误和切换标签页等操作。修改前后应使用相同的窗口宽度和操作步骤。

使用 Milten CSS Scanner 分析公开页面,记录相关样式表和发现的问题。将自动分析未覆盖的状态列入手动检查清单。

不要只凭未使用比例决定删除规则

举一个说明性例子:页面加载时,菜单处于关闭状态。菜单样式最初可能未被使用,但打开菜单后仍然需要。应先完成相关操作,再判断规则是否多余。

Chrome DevTools Coverage 文档介绍了如何在与页面交互时记录 CSS 和 JavaScript 的使用情况。一次记录中未使用的规则,不一定在整个网站中都没有用途。

对每条准备删除的规则,先找到生成它的源文件或构建步骤。修改源代码、重新构建并验证结果,比直接编辑压缩后的文件更便于管理变更。

检查重复声明和选择器权重

重复的声明可能在不同条件下生效。检查媒体查询、元素状态和层叠顺序。合并规则后,确认相同的元素仍然获得预期的样式。

另一个例子是为了修改按钮颜色而反复添加 !important。应先检查发生冲突的规则及其权重,再参考 MDN 的选择器权重说明,在源代码中表达所需的优先关系。

发布后检查外观和交互

修改后重新分析目标 URL。除了文件大小,还要检查按钮、表单和折叠菜单的行为。在移动设备和大屏幕上确认文字换行及焦点指示是否正常。

如需检查颜色和间距的共用值,可以使用 Design Tokens。如果显示问题与标记有关,请参考 HTML 检查指南。

减少未使用的 CSS 一定能让页面变快吗?

加载顺序、资源传输和 JavaScript 也会影响速度。请在相同条件下比较 Speed Scanner 的结果,确认实际发生了哪些变化。

只做自动分析就足够了吗?

还需要检查相关的用户操作和不同的窗口宽度。应分别记录自动分析的范围与手动验证过的状态。

分析公开页面的 CSS。开始修改前,请保存原始测试条件和发现的问题。

网站速度检测

找出拖慢网站速度的原因

使用 Milten 检测页面,查看 Core Web Vitals 指标并获取加快加载速度的建议。

检测网站
Cookies

我们使用 Cookie

我们使用 Cookie 以在你的网站上为你提供更好的体验。你可以在我们的 隐私政策.