Coverage面板标红不等于可删，因其仅记录当前视口、路由和交互下的样式计算结果；必须交叉验证所有响应式状态、伪类触发、JS动态类名及媒体查询条件，否则易误删暗色模式或弹窗样式。
直接看 Coverage 面板的红色行不保险，必须交叉验证交互路径、动态类名和媒体查询状态——否则删掉的可能是暗色模式开关或弹窗关闭按钮的样式。
Coverage 面板为什么标红却不能删？
它只记录当前视口 + 当前路由 + 当前交互下实际参与计算的规则，不是“全局无用”。常见误判场景：
-
@media (max-width: 768px)内的规则，在桌面宽度下必标红，但切换到手机模拟器再录一次就变绿 -
:hover、:focus、:is(.a, .b)中的部分分支，Coverage 不会自动触发，得你手动悬停/点击/按 Tab 键 -
el.classList.add('is-open')这类 JS 动态加的 class，Coverage 录制时没点开菜单，整块规则永远红着 -
display: none容器里的子元素样式，初始渲染阶段没计算，Coverage 就当它不存在
怎么真正确认一条红色 CSS 能删？
不能只信 Coverage 表格里的百分比。三步交叉验证缺一不可：
- 在
Coverage表格里点击红色文件名，跳转到Sources面板，右键红色行 →Reveal in Styles pane：如果右侧Styles标签页里压根没这条规则，说明它连解析都没进，大概率可删；如果能看到但被划掉，那是被覆盖，不是未使用 - 在
Elements面板中右键目标元素 →Break on > attribute modifications，刷新页面，看 JS 是否动态增删了 class 或属性 - 全局搜索项目代码：
classList.add(、className +=、setAttribute('class'、tw`（Tailwind JIT）、css`（Emotion），确认该 class 是否可能在运行时生成
cssnano --stats 模式怎么揪出语义层冗余？
它不压缩，只告诉你哪条规则被删了、为什么删——这对超大 CSS 文件比 Coverage 更准，尤其适合 CI 阶段扫描：
立即学习“前端免费学习笔记（深入）”；
- 必须加
--preset advanced，否则默认 preset 不触发重复检测逻辑 - 对
@import嵌套的文件，要先用postcss-import展开，否则只扫入口文件 - 输出里
removed: true且reason: "duplicated"的行，就是高优先级人工核查项——比如同一颜色值在不同变量里定义了三次 -
reason: "invalid"通常指向过时前缀（如-webkit-transition）或语法错误，这类可批量清理
CSS Overview 报告里的 “Unused declarations” 是啥意思？
它精确到属性值（比如 padding: 12px），不是整条规则。容易误读的点：
- 点击跳转后，可能发现该声明在
@media (min-width: 768px)里，而你当前视口是 400px —— 它不是冗余，只是没命中 -
Colors模块并列标出#333、#333333、rgb(51, 51, 51)，说明设计系统缺失，该归并而非删除 -
Font info显示font-weight: 100到900全在 CSS 里，但实际渲染只用了400和700，问题在字体加载策略，不是删 CSS
真正难的不是找到红色行，而是判断它在所有可能的用户路径、设备尺寸、交互状态、JS 执行时机下是否真的从未生效——Coverage 只给你一个快照，不是判决书。
