识别class和style是否真“死”需四步验证：DevTools设断点观察交互触发、全局搜索JS调用、检查构建产物引用、改名灰度测试功能与无障碍；正则清理须谨慎，空class/style删除需人工核对，html-minifier等工具因不扫描JS而不可靠。
怎么识别 class 和 style 属性是否真“死”
直接看 HTML 里有没有对应 CSS 规则，90% 会误删。很多 class 是被 JS 动态切换的（比如 classList.toggle("is-open")），或由第三方库驱动（如 Bootstrap 的 collapse、show）。style 属性更危险——style="display:none" 看似无样式效果，但可能是 JS 控制显隐的关键开关。
验证必须分四步走：
- 在 Chrome DevTools Elements 面板右键目标元素 → “Break on” → “Attribute modifications”，然后操作页面（点击、滚动、输入），看是否触发断点
- 全局搜索该类名或内联样式值：如
querySelector(".js-modal")、el.style.display = "block"、setAttribute("style", ...) - 检查构建产物（如
main.js）中是否残留引用，注意压缩后变量可能混淆，得搜字符串字面量 - 临时改名灰度测试：把
class="old-loader"改成class="old-loader__dead"，跑关键路径和 E2E 测试，观察功能、无障碍、响应式是否异常
批量删空 class 和空 style 的安全正则
VS Code 的「在文件中替换」配合正则最高效，但必须人工核对后再执行。以下模式已验证可避坑：
- 删空
class：class\s*=\s*["']["']—— 匹配class=""或class= ''，不伤class=" a b "这种带空格的 - 删空
style：style\s*=\s*["'][^"']*?["']—— 但仅限于确认业务无依赖时用；若存在style="display:none"这类逻辑控制项，必须跳过或单独处理 - 别用
class=["'][^"']*["']这种宽泛写法，它会误杀data-class="xxx"或注释里的伪代码
为什么 html-minifier 不适合清理“死属性”
html-minifier 默认不删 class 和 style，因为它无法判断语义依赖。即使开启 removeUnusedCSS，也只对已提取的 CSS 文件生效，对 JS 动态注入的类名、运行时拼接的 innerHTML += 'class="..."' 完全无感。
更关键的是：它不扫描 JS 文件，所以 document.querySelector(".legacy-banner") 这种调用它根本看不见。线上若用了服务端渲染（SSR）或富文本粘贴，purgecss 类工具也会漏掉大量引用。
DOMParser + removeAttribute 是最稳的运行时清理路径
如果清理对象是用户粘贴进来的 HTML 片段（比如富文本编辑器），千万别用正则硬砍。正确链路是：
- 用
new DOMParser().parseFromString(htmlStr, "text/html")解析为独立文档，完全隔离当前页面 - 调用
doc.querySelectorAll('*[style], *[class]')获取所有含这两个属性的节点（注意星号匹配嵌套） - 遍历每个节点，对空
class值做el.removeAttribute("class")，对空style值做el.removeAttribute("style") - 最后返回
doc.body.innerHTML，不污染原 DOM，也不触发重排
这个流程绕开了所有正则陷阱，也规避了 innerHTML 重赋值导致的监听器丢失问题。真正容易被忽略的是：清理后必须检查 JS 是否还通过 getAttribute("class") 或 hasAttribute("style") 做逻辑分支——这种判断比样式本身更隐蔽，也更容易崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
