data-属性比class/id更可控、语义化且利于维护，专为存储自定义数据设计，隔离样式与状态，支持布尔写法，CSS匹配高效且不干扰可访问性与优先级。
直接用 data- 属性写选择器，比滥用 class 或硬塞 id 更可控、更语义、也更利于维护。
为什么不用 class 也能精准选中元素
类名本质是样式钩子，但常被误当成“逻辑标识”——比如 class="is-loaded" 或 class="status-active"。这类用法会让样式层和状态层耦合，改个状态就得动 CSS，还容易和设计系统里的基础类冲突（比如 .active 被框架复用了）。
data- 属性专为存储自定义数据而生，浏览器不渲染、不解释，只供 JS 和 CSS 使用，天然隔离关注点。
- 它不会影响可访问性（不像
aria-那样触发辅助技术行为） - 它不参与 CSS 优先级计算（
[data-status="pending"]和.pending优先级相同，都是 10） - 它支持布尔值写法：
<button data-disabled></button>可直接用[data-disabled]匹配
data-* 属性在 CSS 中的合法写法与限制
CSS 里只能用属性选择器匹配 data-，不能用伪类或组合器“推导”它的含义。浏览器对属性名大小写敏感，但 HTML 解析时会把 data-user-id 和 data-userId 当成不同属性——建议统一用 kebab-case（中划线）。
常见错误：
- 写成
data_user_id（下划线）：部分旧版 Safari 对非标准命名解析不稳定 - 漏掉引号：
[data-role=header]在值含空格或特殊字符时会失效，必须写成[data-role="main header"] - 误用通配：
[data-*]是非法语法，CSS 不支持通配属性名
正确示例：
[data-state="loading"] { opacity: 0.6; cursor: wait; }
[data-variant="outline"] { border: 2px solid currentColor; }
[data-disabled] { pointer-events: none; }
如何配合 JS 实现状态驱动的样式切换
关键不是“JS 改 class”，而是“JS 改 data 属性，CSS 自动响应”。这样避免手动同步多个 class，也杜绝了 class 污染（比如同时存在 .loading 和 .error 时样式打架）。
操作要点：
- 用
element.dataset.xxx = "value"设置值（自动加data-前缀） - 用
element.hasAttribute("data-xxx")判断布尔型状态，比查dataset.xxx === ""更可靠 - 避免频繁 setAttribute —— 直接改
dataset是批量更新的更优路径
例如按钮加载态：
<button data-state="idle">提交</button>
<style>
button[data-state="loading"] { background: #ccc; }
button[data-state="success"] { background: #4CAF50; }
</style><script>
btn.dataset.state = "loading"; // 样式立即生效
</script>
性能与可维护性容易被忽略的细节
浏览器对 [attr="val"] 这类属性选择器的匹配效率，其实和 .class 差不多，但比 div p span 这种后代选择器快得多——因为它是原子匹配，不涉及树遍历。
真正拖慢渲染的是选择器嵌套过深或滥用通配符，而不是用了 data-。但要注意两个边界情况：
- 大量使用
[data-*]且未加标签限定（如[data-id]），会强制全 DOM 扫描；应写作button[data-id]或.card[data-id] - 服务端渲染时若
data-值动态生成且不可预测（如 UUID），会导致 CSS 无法复用，建议预设有限枚举值（"draft"/"published"）
最后一点：别为了“炫技”把所有 class 都替换成 data 属性。表单控件、布局容器、视觉模块仍该用 class；data- 只负责表达“这个元素此刻处于什么业务状态”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
