应采用「运行时检测+静态分析」双路验证：用puppeteer/playwright抓取实际生效样式，再以purgecss/uncss静态扫描交叉比对；需配置safelist应对动态类名、框架指令及tailwind等场景，并结合chrome coverage工具多状态验证，ci中通过diff增量拦截新增无用css。
怎么快速找出项目里没用的CSS规则
靠人眼扫文件基本无效，尤其当CSS分散在多个style标签、.css文件、styled-components甚至内联style属性里时。真正可行的是「运行时检测」+「静态分析辅助」双路验证。
推荐组合：puppeteer驱动真实页面交互，配合playwright或chrome-devtools-protocol抓取实际生效的样式；再用uncss或purgecss做静态扫描作交叉比对。
-
uncss适合传统HTML+CSS项目，但无法处理动态类名（比如class="btn btn--{type}"） -
purgecss必须配好content路径，漏写.html或.js会导致大量误删——它只看字符串匹配，不解析JS逻辑 - 如果用了
CSS Modules或tailwind，得额外配置safelist，否则is-active、md:hidden这类运行时添加的类会被干掉
为什么purgecss删完后页面样式崩了
不是工具错了，是它根本不知道你JS里怎么拼类名。比如element.classList.add('text-' + color)，purgecss看不到color可能等于red，就直接把所有text-red当死代码删了。
更隐蔽的是：某些框架（如Vue）的v-show、v-if切换会动态挂载/卸载DOM，但purgecss静态扫描时根本没触发这些分支。
立即学习“前端免费学习笔记（深入）”；
- 必须在
safelist里加正则，比如/^text-.*$/或/^is-.+$/ - 若用
tailwind，别直接跑purgecss，改用tailwind.config.js里的content字段——它内置了更鲁棒的AST解析 - 检查
purgecss输出的removedSelectors日志，重点盯那些明显在用却被删的类名，反向补漏
Chrome DevTools里怎么手动验证某条CSS是否真没用
别只看「Styles」面板里灰掉的属性——那只是当前元素没匹配上，不代表全局无用。得用Coverage工具实时看加载的CSS里哪些字节压根没执行过。
打开DevTools → More Tools → Coverage，刷新页面，它会标出每行CSS的使用率。红色=0%，绿色=100%。但注意：这个统计只覆盖当前页面路径和当前交互状态。
- 必须点遍所有可交互区域（菜单展开、表单校验、错误态、loading态），否则覆盖率数据严重偏低
- 单页应用（SPA）要手动跳转到各路由再点「Reload coverage」，否则只统计首页
- Coverage显示某规则未使用，不代表能删——可能是JS动态
insertRule注入的，或者媒体查询在当前视口没命中
CI流程里自动拦截新增无用CSS
靠人工审计注定漏，得让机器在合并前卡住。核心思路是：对比PR前后purgecss识别的「待删列表」增量，如果有新增未使用的规则，就报错。
关键不在删，而在“发现即阻断”。否则每次发版都带冗余，越积越多。
- 用
git diff提取本次改动涉及的CSS文件，只对它们跑purgecss --dry-run - 把结果和基线（如
main分支最新构建产物）的已知无用规则做差集，输出新增项 - 注意排除
@keyframes和@font-face——它们不会出现在DOM里，但purgecss默认会标记为未使用
真正麻烦的是那些“看起来没用，但其实被Web Component Shadow DOM 或 iframe 隔离使用”的规则——工具扫不到，只能靠文档约定或人工标注/* purgecss ignore */。这点容易被忽略，一删就出生产问题。
