必须先验证再删除：通过Chrome DevTools设“Break on Attribute modifications”观察JS是否修改属性，执行document.querySelectorAll检查DOM引用，全局搜索JS/CSS中querySelector、addEventListener及属性选择器调用，并用vscode-html-validate检测未引用id和废弃标签。
直接删掉没被 JS 或 CSS 引用的 HTML 属性，比压缩空格更影响运行时稳定性；很多 class、id、data- 属性看着“没用”，其实正被 querySelector、addEventListener 或 CSS 属性选择器悄悄依赖。
怎么确认某个 class 或 id 真的没人用？
不能只看源码里有没有对应样式或脚本调用——运行时引用可能藏在动态拼接、模块懒加载或第三方 SDK 里。
- 在 Chrome DevTools 的 Elements 面板右键目标节点 →
Break on > attribute modifications，刷新页面，看 JS 是否修改它的class、style或自定义data-属性 - 在 Console 执行
document.querySelectorAll('[class*="legacy"], [id^="temp-"], [data-testid]')，确认这些属性值是否还存在于当前 DOM 中 - 全局搜索（VS Code 或 grep）该属性值：查 JS 里是否出现在
querySelector、getElementById、addEventListener('click', ...)的选择器中；查 CSS 文件里是否出现在[data-loaded]、input[data-required]这类属性选择器中
data- 属性清理最容易踩的坑
很多项目把 data- 当作“临时开关”或“调试标记”，上线后忘了清理。它们不参与渲染，但会拖慢 querySelectorAll 性能，且可能被误当 API 字段暴露。
-
data-test-id、data-cy、data-testid这类 E2E 测试属性，在生产环境应彻底移除——CI 构建阶段用html5-clear配置removeDataAttributes规则即可 -
data-temp、data-draft、data-debug这类开发期标记，必须人工核对：如果 JS 里有if (el.dataset.draft) {...}，就不能删；否则可批量清除 - 注意
data-值含空格或特殊字符时，CSS 选择器需转义，比如[data-section="hero banner"]要写成[data-section="hero\ banner"]，删之前先验证是否真被样式读取
用 html5-clear 安全清理属性的实操要点
它不是“一键清空”，而是靠规则集做语义化裁剪。默认 basic 模式只删注释和空属性，要删 data- 或冗余 class，得显式启用对应规则。
- 安装后运行：
npx html5-clear -f index.html -o dist/index.html --ruleset basic,removeDataAttributes,removeUnusedClasses - 关键配置项必须手动加：
--remove-unused-ids（配合no-unused-id规则）、--remove-empty-attributes（删class=""、id=""） - 慎用
removeAllDataAttributes：它会干掉data-src（懒加载）、data-icon（图标库）等真实功能属性，应改用白名单模式，如--keep-data-attributes data-src,data-icon
为什么 class 不能按“没写 CSS 就删”来判断？
现代框架和工具链让 class 的用途远超样式：Tailwind 的原子类直接控制行为，CSS-in-JS 用 className 注入动态样式，甚至 ARIA 逻辑也依赖 class 切换状态（如 is-open 控制 aria-expanded）。
- 检查是否被 JS 动态操作：
el.classList.toggle('is-active')、el.className = 'loaded'都算强依赖 - 查构建产物：Vue/React 组件编译后常把
class作为 prop 透传，源码里没出现，但打包后 DOM 里有 - 用 Lighthouse 的 “Unminified CSS” 审计项反推：如果某
class对应的样式规则未被加载，才可能是真冗余；否则哪怕没显式声明，也可能被 CSS-in-JS 或 runtime 注入
真正危险的不是多几个属性，而是删掉一个被运行时读取的 data- 或 class 后，JS 报 Cannot read property 'dataset' of null 或样式突然失效——这种问题往往在线上静默发生，得靠 Break on 和全局搜索交叉验证才能提前堵住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
