判断class是否真无用需多维验证：先在Chrome DevTools中右键元素设“Break on Attribute modifications”观察交互触发；再全局搜索JS中querySelector、classList等调用；检查压缩后构建产物引用；最后改类名灰度测试并验证无障碍、响应式、CSS-in-JS及SSR场景。
直接删掉没用的 class 和 style 属性，比重写 CSS 更快也更安全——前提是确认它们真没被 JS 或样式表引用。
怎么判断某个 class 是否真的无用？
别只看 HTML 里有没有对应 CSS 规则。很多老项目里，class 是被 JS 动态控制显隐、切换状态，或者通过第三方库（比如 Bootstrap 的 collapse、active）驱动的。
- 在 Chrome DevTools 的 Elements 面板中右键该元素 → “Break on” → “Attribute modifications”，然后交互操作，看是否触发断点
- 全局搜索
document.querySelector(".xxx")、getElementsByClassName("xxx")、classList.toggle("xxx")等调用 - 检查构建产物（如打包后的
main.js）里是否还残留对该类名的引用，尤其注意压缩后变量名可能被混淆 - 临时把
class="xxx"改成class="xxx__dead"，跑一遍 E2E 测试或手动遍历关键路径，观察功能是否异常
批量删除空 class 和冗余 style 的正则表达式
VSCode 自带的「在文件中替换」配合正则，能一次清理大量低价值属性。注意：先备份或提交 Git。
- 删空
class：class\s*=\s*["']["']→ 替换为空 - 删空
style：style\s*=\s*["'][^"']*?["']→ 但要小心，有些style="display:none"是业务逻辑需要的，得人工核对 - 删内联
style中无意义声明（如font-weight:normal、color:#000）需更精细匹配，建议用posthtml插件或自定义脚本，而非正则硬砍 - 匹配带空格的 class 值（如
class=" a b "）用：class\s*=\s*["']\s*["']，否则会漏掉前后有空格的情况
为什么不能直接用 html-minifier 一键清理？
它默认不删 class 和 style，因为无法判断语义依赖。即使开启 removeUnusedCSS，也只对已提取的 CSS 文件生效，对 JS 注入的 class、运行时生成的 style 完全无感。
立即学习“前端免费学习笔记（深入）”；
-
html-minifier的customAttrSurround和customAttrAssign可支持 Vue/React 的绑定语法，但对原生 JS 操作 DOM 的场景无效 - 它删注释、空格、换行很稳，但动属性前必须搭配静态分析工具（如
purgecss+glob扫描所有 JS 文件） - 线上环境若用了
innerHTML += "...class=..."这种拼接，purgecss根本找不到引用，直接删就炸
清理后最易被忽略的验证点
不是“页面看起来没坏”就完事了。真正容易翻车的是那些不显眼但关键的环节：
- 无障碍检测：用 axe DevTools 扫一遍，确认删掉的
class没承担sr-only、visually-hidden这类可访问性角色 - 响应式断点：某些
class只在媒体查询中生效（如d-none d-md-block），在桌面模式下看不到，但移动端可能崩 - CSS-in-JS 场景：Emotion、Styled Components 生成的 class 名是哈希值，HTML 里看到的
css-1a2b3c不能删——它们由 JS 运行时注入，HTML 源码里只是占位符 - 服务端渲染（SSR）：若用 Next.js/Nuxt，删了 HTML 中的 class，但 JS hydration 时仍尝试操作它，会导致 mismatch warning 甚至 layout shift
