chrome coverage面板标出未匹配任何元素的css规则，用于清理冗余样式；需通过reload and start recording录制典型交互态，但对@media、js注入、css-in-js、shadow dom等动态场景无效，须交叉验证才可安全删除。

Chrome Coverage 面板能直接标出未匹配任何元素的 CSS 规则

Coverage 面板不是查“为什么样式不生效”，而是告诉你哪些整条 CSS 规则从头到尾都没匹配过任何 DOM 元素——这对清理冗余样式、定位无效选择器最快最直观。

打开方式：Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Show Coverage 回车；或者右上角三点 → More tools → Coverage。必须点左上角带循环箭头的 Reload and start recording 按钮，不能手动按 F5。

• 录制前确保页面处于典型状态：比如已登录、菜单已展开、响应式断点已切到目标宽度
• 单页应用（SPA）需逐个访问关键路由（如 /dashboard、/settings），每换一次都点一次 Reload and start recording
• 覆盖所有交互态：点击按钮触发弹窗、滚动到底部加载懒加载内容、切换暗色模式、模拟网络错误后重试

Coverage 显示某条 CSS 红了，但删掉就崩，常见原因

红色只代表「这次录制中没执行」，不等于逻辑上无用。它完全看不到运行时动态行为：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• @media 查询在当前视口下未命中（比如 @media (min-width: 1200px) 在 900px 宽窗口里必然标红）
• JS 动态插入的规则：document.styleSheets[0].insertRule('.foo{color:red}', 0) —— Coverage 根本不扫描这类运行时注入
• 通过 el.classList.add('is-open') 添加的类，若录制时没触发该操作，对应规则就标红
• CSS-in-JS 库（如 Linaria、Emotion）生成的样式不在原始 .css 文件里，Coverage 对其不可见
• Shadow DOM 内部的 <style></style> 不会被主文档 Coverage 统计到，得单独打开 Shadow Root 节点再录

别只信 Coverage，交叉验证才敢删

单靠 Coverage 下删除结论太危险。至少要用一种方式反向确认：

• 在 Elements 面板右键目标元素 → Break on → attribute modifications，然后手动触发疑似功能（如点击开关），看是否动态加了 class 或 style
• 全局搜索项目代码里的 classList.add、className +=、setAttribute('class',，把拼出来的类名正则写进 PurgeCSS 的 safelist（例如 /^is-.+$/）
• 对 Tailwind 项目，Coverage 结果基本不可信——所有 utility class 都是按需生成的，得靠 content 配置 + purge 构建阶段扫描

Linaria 和 JSS 项目要换思路，Coverage 基本失效

Linaria 是静态提取，JSS 是运行时生成唯一类名，它们的样式生命周期和传统 CSS 文件完全不同：

• Linaria 项目应依赖 @linaria/stylelint-config-standard-linaria + stylelint 检查未使用导出的样式变量，而非 Coverage
• JSS 的 createUseStyles 返回的 class 名是动态计算的，Coverage 看不到源码里定义的 JS 对象结构，只能靠单元测试覆盖组件渲染路径
• 两者都需结合构建产物分析：用 source-map-explorer 查最终打包体积里哪些样式模块占比异常高，再顺藤摸瓜

真正容易被忽略的是：Coverage 统计的是字节级执行，不是语义级使用。一条 .btn-primary:hover 在桌面端录屏时永远标红，但它对用户体验至关重要——覆盖率数字本身没有意义，关键是你录了什么、没录什么、以及你准备删什么。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！