用 data-* 属性替代硬编码类名和内联逻辑，实现语义化、可复用、解耦的 html 重构：统一 data-role="submit" 统管行为，data-variant 控制样式变体，data-config 存储结构化配置，避免 class 爆炸与条件分支。
直接用 data- 属性替代硬编码逻辑和样式钩子，是 HTML 重构中最轻量、最解耦的突破口。它不依赖框架，不破坏现有结构，但能立刻切断 JS 和 CSS 中大量重复的 ID/类名/条件分支。
用 data-role 替代一堆功能类名
当多个按钮都执行“提交”动作，但分别写成 class="btn-submit-order"、class="btn-submit-form"、class="btn-save-draft"，CSS 就得反复写相似规则，JS 也得分别监听。换成统一语义： data-role="submit"。
- CSS 可复用：
[data-role="submit"] { padding: 8px 16px; background: #007bff; } - JS 只需一次委托：
document.addEventListener('click', e => { if (e.target.matches('[data-role="submit"]')) { /* 通用提交逻辑 */ } }) - 新增按钮不用改任何 JS/CSS，加个
data-role="submit"就自动生效 - 避免用
data-type或data-action这类泛化词——它们会倒逼你写if (el.dataset.type === 'order') {...}，又回到分散判断的老路
用 data-variant 控制样式变体而非新增 class
面对“主按钮”“次按钮”“危险按钮”，别再写 class="btn btn-primary"、class="btn btn-secondary"、class="btn btn-danger"。这些组合爆炸式增长的 class 名，本质是把设计系统变量塞进了 HTML 结构里。
- 统一用
data-variant="primary"、data-variant="secondary"、data-variant="danger" - CSS 写成：
button[data-variant="primary"] { background: #007bff; }、button[data-variant="danger"] { background: #dc3545; } - 所有按钮共享基础样式（
button { border: none; border-radius: 4px; }），变体只覆盖差异部分 - 如果某处需要“primary + small”，不要加
data-variant="primary small"—— 那就该用data-size="sm"单独控制，保持正交性
用 data-config 替代内联 JS 字符串拼接
常见反模式：onclick="submitForm('user', 'en', true)"。这种写法把参数逻辑锁死在 HTML 里，无法被外部 JS 统一拦截或审计，也无法做类型校验。
- 改为：
<button data-handler="submit-form" data-config='{"domain": "user", "lang": "en", "requireAuth": true}'></button> - JS 解析时用
JSON.parse(el.getAttribute('data-config'))—— 注意必须用getAttribute，因为dataset.config会把 JSON 字符串转成 undefined（含引号/花括号时 dataset 不支持） - 关键点：配置值必须是合法 JSON 字符串，单引号无效；空格和换行要手动去除，否则
JSON.parse报错 - 不推荐把整个对象序列化进属性，复杂配置应走
data-id查表，避免 HTML 膨胀
为什么 data- 重构容易失败
真正卡住团队的，从来不是技术实现，而是命名共识和生命周期管理。
-
data-collapse-group和data-accordion-id看似差不多，但前者强调作用域隔离，后者暗示唯一标识——混用就会导致 JS 逻辑错乱 - 服务端渲染时若后端未对
data-config值做 JSON 转义（比如值里有双引号），前端解析直接失败，且控制台报错不明确 - Vue/React 组件内部动态添加
data-属性，可能因渲染时机晚于 JS 初始化逻辑而读不到——得监听mutationObserver或等mounted后再注册 handler - 没有文档约束取值范围，比如
data-variant允许填什么值？没人查文档就随手写"primary-light"，结果 CSS 没匹配上，样式丢失还不报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
