data-*属性更适合作为JS模块锚点，因其专为行为标记设计、不参与样式/SEO、可重复使用、支持动态生成、便于调试且协作更安全；命名须全小写+连字符、禁大写/空格/特殊符、值用双引号包裹。
为什么 data-* 属性比 class/id 更适合作为 JS 模块锚点
用 class="header-nav" 或 id="main-slider" 绑定 JS 逻辑，等于把样式名和行为强耦合。一旦设计师改名、重构 CSS、加新模块，document.querySelector('.header-nav') 就可能静默失效，连报错都没有。
而 data-js="nav-primary" 或 data-module="product-list" 是专为 JS 行为设计的语义标记，不参与样式、不影响 SEO、浏览器忽略其存在，只对脚本有意义。
- 同一个页面可重复使用（
data-js="card-toggle"可出现在多个商品卡片上，不会像id那样冲突） - 支持动态生成：Vue/React 渲染时直接注入，无需后期 patch DOM
- 便于调试：
[data-js]在 DevTools 里一眼可筛，比扫一堆 class 名快得多 - 避免误删：设计师改 class 名时，通常不会动
data-属性，协作更安全
data-* 命名必须遵守哪些硬性规则
data- 后的名称不能包含大写字母、空格、特殊符号（如 .、:、/），浏览器会直接忽略非法命名——比如 data-js-toggle-state 合法，但 data-js:toggle 或 data-jsToggle 在部分旧版 Safari 中不被识别。
- 全小写 + 连字符分隔（kebab-case）：推荐
data-track="search-submit"，而非dataTrack或data_track - 避免纯数字开头：
data-123-id不合法；应写成data-id-123 - 值必须用双引号包裹：
data-api="/v1/products"正确；data-api=/v1/products在含空格或特殊字符时会解析失败 - 不要嵌套 JSON 字符串：别写
data-config='{"delay":300}'，改用多个原子属性，如data-delay="300" data-autoplay="true"
什么时候不该用 data-*，而该用原生语义或 ARIA
不是所有“需要 JS 控制”的场景都适合加 data-。如果行为已有标准语义支撑，硬加反而破坏可访问性和浏览器原生能力。
立即学习“前端免费学习笔记（深入）”；
- 开关类交互优先用
<button type="button" aria-expanded="false"></button>，而不是<div data-js="toggle" role="button"> —— 前者自带键盘聚焦、回车触发、屏幕阅读器播报<li>表单验证状态用 <code>aria-invalid="true"和aria-describedby，比data-valid="false"更可靠 - 动态加载内容区域，用
aria-live="polite"告知屏幕阅读器更新，而非靠 JS 监听data-loading="true"自己模拟 -
data-不替代role或tabindex：它们解决的是不同层级的问题——一个是行为标识，一个是可访问性契约 - ESLint 插件
eslint-plugin-jsx-a11y可配规则禁止div上出现onClick，倒逼改用button+data-行为分离 - HTML 模板中统一用
data-js-前缀（如data-js-carousel），CSS 中禁用.js-类名，从源头阻断 class 污染 - CI 流程中跑
html-validate，加自定义规则检查：data-属性是否全小写、是否含非法字符、是否值为空字符串（data-id=""应为data-id="default"） - 最易忽略的一点：后端模板（如 Twig、Nunjucks）里也得同步约束，否则 SSR 渲染出的
data-js="NavToggle"一样会失效
如何在团队中落地 data-* 使用规范
光靠文档没人看。真正起效的是工具链+轻量约束：
data-* 不是万能胶，它只在「JS 行为需要稳定锚点，且该锚点不承担语义或样式职责」时才成立。滥用它去模拟按钮、表格、列表，等于用螺丝刀拧螺母——能转，但迟早滑丝。
