真正可靠的方式是基于实际页面行为做覆盖率分析：用chrome devtools的coverage面板刷新页面，标出未执行的css规则；purgecss则通过字符串匹配白名单保守剔除未声明规则，但易误删js动态类名、框架绑定类及正则/bem变体。
怎么判断一个CSS文件里哪些样式根本没用到
直接看源码基本没法判断，因为样式是否生效取决于HTML结构、JS动态操作、媒体查询触发条件等多种运行时因素。人眼审计只适合极小项目，稍大一点就容易漏掉hover、:focus-within、JS切换的类名，或者被display: none包裹但实际会显示的模块。
真正可靠的方式是基于实际页面行为做覆盖率分析：
- 用Chrome DevTools的Coverage面板（
Cmd+Shift+P→ 输入“Coverage”）刷新页面，它会标出所有加载的CSS规则中未执行的部分，红色代表未命中 - 注意：它只反映当前页面路径和交互状态下的结果，比如没点开的下拉菜单、没触发的暗色模式都不会被统计
- 单页应用（SPA）必须手动模拟所有路由和状态，否则
.modal--success这类只在提交后出现的类会被误判为冗余
PurgeCSS为什么不能直接扫CSS文件就删
它不解析CSS语义，只做字符串匹配——把你在content配置里指定的文件（HTML/JS/模板）中出现的所有类名、ID、属性选择器，当成“可能用到”的白名单，再反向过滤CSS里的规则。所以它不是“检测冗余”，而是“保守剔除未声明的”。
常见翻车点：
- JS动态拼接类名：
el.classList.add('btn-' + type)，如果type值不在源码字符串里显式出现（比如来自API），PurgeCSS完全看不到 - 框架绑定类名：Vue的
v-bind:class="{ 'is-active': active }"，若active是响应式变量，PurgeCSS不会执行JS逻辑，is-active可能被误删 - 正则类名或BEM变体：
.icon--large、.card__header，必须在defaultExtractor里配好匹配规则，否则全删
Webpack里配PurgeCSS最容易漏掉的三件事
很多人按文档加了purgecss-webpack-plugin，打包后页面直接错乱，问题往往出在边界条件上：
- 没包含所有模板入口：Next.js要加
pages/**/*.{js,ts,jsx,tsx}，Nuxt还要额外处理layouts/和components/目录 - 忽略CSS-in-JS：
styled-components或emotion生成的类名不在CSS文件里，PurgeCSS默认不处理，得配extractors或换用@fullhuman/postcss-purgecss+ PostCSS流程 - 没保留必要的全局类：像
sr-only、visually-hidden这种只在HTML里写一次但全站通用的辅助类，必须加进safelist，否则一删就残障访问失效
上线前必须验证的两个关键点
自动化清理永远有盲区，尤其涉及第三方组件库或设计系统：
- 检查
:not()、:has()等现代伪类是否被正确保留——旧版PurgeCSS不识别:has(.trigger)，会连带删掉整个规则 - 打开控制台，搜索
Failed to load module script或CSSStyleSheet.insertRule: Failed这类错误，有时是PurgeCSS把@layer或@import依赖的规则删了，导致后续CSS解析中断
最保险的做法：上线前用Lighthouse跑一次“Unused CSS”审计，它比Coverage更贴近真实加载链路，能抓到webpack split chunk里被重复引入又未使用的CSS块。别信配置完就万事大吉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
