PurgeCSS通过分析HTML/JS中引用的类名与CSS选择器比对，删除未使用样式；需配合人工审查、运行时依赖验证及构建产物检查，因正则无法识别动态类名和上下文语义。
匹配所有CSS类选择器但排除关键功能类
直接搜\.([a-z0-9-]+)会把所有类名都抓出来，但你真正要剔除的只是那些纯样式类（如text-center、mb-2），而js-toggle、is-loading这类行为类必须保留。正则本身不支持“排除某前缀”的逻辑，所以得靠两步走：先提取全部类名，再人工筛或用二次正则过滤。
操作建议：
- 打开
Find in Files（Ctrl+Shift+F），勾选Regular Expression - 查找：
\.([a-z0-9-]+)\s*{—— 匹配以.开头、后跟合法类名、紧接着{的定义行 - 确保
Where填入**/*.css限定范围，避免扫到JS或HTML里的伪类 - 点
Find All，结果在侧边栏列出；此时别急着替换，先看是否混入了.btn-primary:hover这类伪类——它们不该被删
安全剔除类定义而非仅删选择器
只删.old-class {这行，留下空大括号或孤零零的}，会导致语法错误。真正要删的是整个规则块，包括花括号和内部声明。但CSS里规则可能跨多行、含注释、嵌套（如SCSS），原生Sublime正则很难100%安全处理。
稳妥做法是分段清理：
立即学习“前端免费学习笔记（深入）”；
- 先删掉所有单行规则：
\.([a-z0-9-]+)\s*\{[^}]*\}（启用. matches newline） - 再处理跨行规则：用
\.([a-z0-9-]+)\s*\{[\s\S]*?\}，但必须确认[\s\S]没吞掉中间的@media或@keyframes块 - 遇到
/* */注释夹在规则中时，[\s\S]*?会把注释一起吃掉——这不是bug，是设计如此；若注释需保留，就得手动跳过这些匹配项 - 千万别用
\..*?\{[\s\S]*?\}——\.会误匹配URL里的点，比如background: url(./img.png);也会被当选择器干掉
批量删除后验证CSS完整性
删完类定义不等于任务结束。浏览器不会报错，但页面可能突然失样或交互失效——因为有些类虽未在CSS里定义，却在JS里动态添加（如el.classList.add('fade-out')）。光靠正则无法识别这种运行时依赖。
必须做三件事：
- 用
Ctrl+Shift+F全局搜class=".*?old-class和className.*?old-class，确认HTML/JS中是否还引用该类 - 检查构建产物（如Webpack输出的
dist/）里是否残留该类——有时PostCSS或Tailwind purge没生效，CSS里删了，但打包后还在 - 打开DevTools → Elements面板，筛选器输
.old-class，看DOM里是否真没渲染出这个类；若有，说明删早了 - 如果项目用了CSS-in-JS（如Emotion），
css`...`模板字符串里的类名不会被上述正则捕获，得单独查jsx或tsx文件
为什么不能靠一次正则彻底清理
因为CSS类的生命周期不是静态的。一个类可能在base.css里定义，在theme.css里覆盖，在utils.js里拼接字符串添加，在test.e2e.js里断言存在。正则只看见文本，看不见上下文。
真正耗时的从来不是写正则，而是判断每个匹配项是否“可删”。text-sm看起来像工具类，但它可能是组件库强制要求的最小字号；hidden看似通用，但React Router用它控制路由切换动画。这些都得结合代码语义和团队规范来定，没法交给Replace All按钮。
