data-*属性不该替代class做状态标记，因其不参与语义表达、不被辅助技术识别、无法自然触发CSS响应，且高频变更会引发性能与维护问题；它仅适合存储静态元信息，如data-track-id或data-product-sku。
别用 data- 属性替代 class 做状态标记——这不是提升可维护性，而是埋下 CSS 失效、可访问性退化、调试混乱的隐患。
为什么 data-liked 不该代替 class="liked"
常见错误现象：button[data-liked="true"] 写了样式，但按钮点击后视觉没变；或者屏幕阅读器读不出“已点赞”状态；又或者团队新人改了 CSS 类名，却漏掉同步更新 JS 里的 dataset.liked 判断逻辑。
根本原因在于：data- 属性不参与语义表达，也不被辅助技术主动识别；而 class 是标准的、可组合的、可继承的样式与状态载体。用 data- 承担状态呈现职责，等于把样式逻辑和行为逻辑耦合在同一个地方，还绕过了 CSS 的自然响应机制。
-
class支持多值叠加（class="btn btn-primary is-loading"），data-只能存单个字符串 -
aria-pressed、aria-checked等 ARIA 属性才是给状态提供可访问性支持的正道，不是靠data- - 当状态频繁切换（如加载中 → 成功 → 失败），反复写
dataset.status = "loading"会触发 DOM 重排，比classList.toggle()开销更大
data- 真正该干的活：存元信息，不是管状态
它适合放那些“写入一次、基本不动、JS 或 CSS 需要快速查到”的上下文数据。比如：
立即学习“前端免费学习笔记（深入）”；
-
data-track-id="header-cta"—— 埋点用，不参与 UI 渲染 -
data-modal-target="login-form"—— 指向另一个元素 ID，用于 JS 绑定弹窗逻辑 -
data-product-sku="ABC-123"—— 服务端渲染后供 JS 发起购买请求，值不变 -
data-tooltip-content="仅限 VIP 用户"—— 纯文本提示，不随交互变化
这些值不会因为用户点击、滚动、输入而高频变更，也不会影响视觉表现本身——它们只是“说明这个元素是什么”，而不是“这个元素现在是什么状态”。
什么时候你其实想用的是 dataset，但误用了 data- 写法
典型错误：HTML 里写 data-userId="123"，JS 里试图读 el.dataset.userId 却返回 undefined。
原因很直接：浏览器只解析符合规范的 data- 属性。命名必须全小写 + 连字符，不能驼峰、不能下划线、不能大写字母。
- ✅ 正确：
data-user-id="123"→ JS 中el.dataset.userId - ❌ 错误：
data-userId="123"、data_user_id="123"、data-UserID="123"—— 全部被忽略 - 数字开头需方括号访问：
data-2024-year="Q2"→el.dataset["2024Year"]，不能点号
更隐蔽的问题是：你改了 dataset.xxx，DevTools 里看到属性值变了，但刷新页面后还原——因为 dataset 是内存代理，不自动同步回 HTML；真要持久化，得配 setAttribute("data-xxx", value)。
复杂点往往藏在“看起来最省事”的地方
比如一个按钮同时有 class="btn btn-disabled" 和 data-is-disabled="true"，表面看双保险，实际是两套状态源。JS 读 dataset.isDisabled，CSS 用 .btn-disabled，哪边漏同步，UI 就错位。真正的可维护性来自单一事实源：状态由 JS 管理，视觉由 class 响应，data- 只负责透传不可变的上下文。
