CSS 分析会检查样式的数量、使用情况以及选择器权重(specificity)。报告中的“未使用”表示某条规则未在本次检查的页面状态下使用。它仍可能在打开菜单或改变窗口宽度后发挥作用,不应立即删除。
确定要检查的页面和交互
选择包含不同界面元素的页面,例如共用页头、商品列表或输入表单。除了初始状态,还要检查打开菜单、显示表单错误和切换标签页等操作。修改前后应使用相同的窗口宽度和操作步骤。
使用 Milten CSS Scanner 分析公开页面,记录相关样式表和发现的问题。将自动分析未覆盖的状态列入手动检查清单。
不要只凭未使用比例决定删除规则
举一个说明性例子:页面加载时,菜单处于关闭状态。菜单样式最初可能未被使用,但打开菜单后仍然需要。应先完成相关操作,再判断规则是否多余。
Chrome DevTools Coverage 文档介绍了如何在与页面交互时记录 CSS 和 JavaScript 的使用情况。一次记录中未使用的规则,不一定在整个网站中都没有用途。
对每条准备删除的规则,先找到生成它的源文件或构建步骤。修改源代码、重新构建并验证结果,比直接编辑压缩后的文件更便于管理变更。
检查重复声明和选择器权重
重复的声明可能在不同条件下生效。检查媒体查询、元素状态和层叠顺序。合并规则后,确认相同的元素仍然获得预期的样式。
另一个例子是为了修改按钮颜色而反复添加 !important。应先检查发生冲突的规则及其权重,再参考 MDN 的选择器权重说明,在源代码中表达所需的优先关系。
发布后检查外观和交互
修改后重新分析目标 URL。除了文件大小,还要检查按钮、表单和折叠菜单的行为。在移动设备和大屏幕上确认文字换行及焦点指示是否正常。
如需检查颜色和间距的共用值,可以使用 Design Tokens。如果显示问题与标记有关,请参考 HTML 检查指南。
减少未使用的 CSS 一定能让页面变快吗?
加载顺序、资源传输和 JavaScript 也会影响速度。请在相同条件下比较 Speed Scanner 的结果,确认实际发生了哪些变化。
只做自动分析就足够了吗?
还需要检查相关的用户操作和不同的窗口宽度。应分别记录自动分析的范围与手动验证过的状态。
分析公开页面的 CSS。开始修改前,请保存原始测试条件和发现的问题。
