用[data-*]属性选择器替代class可避免样式污染、命名冲突，提升语义化和作用域隔离；配合:is()和attr()能简化多状态控制与动态内容输出，但高频切换场景仍宜用class。
用 [data-*] 属性选择器替代 class 做状态区分
纯 CSS class 容易泛化，比如 .active 可能被多个组件复用，导致样式污染。用自定义属性（data-）绑定具体上下文，能天然隔离作用域。
例如按钮在表单提交中处于「禁用且带校验错误」状态，可写：
<button data-state="error" data-disabled="true">提交</button>对应 CSS：
[data-state="error"][data-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
-
浏览器原生支持，无需 polyfill，所有现代浏览器都兼容
[data-*]选择器 - 避免命名冲突：不像
.btn--error-disabled那样依赖 BEM 约定，data-属性名由你完全控制 - JS 修改时更语义化：
el.dataset.state = 'success'比el.classList.replace('error', 'success')更直白
:is() + [data-*] 组合简化多状态选择器
当一个组件有 3 种以上状态（如 idle / loading / success / error），为每种写独立规则会冗余。用 :is() 把它们聚合成一组，再配合 [data-status] 统一控制基础样式。
示例：
[data-status]:is([data-status="loading"], [data-status="error"]) { transition: none; }
[data-status="success"] { color: #28a745; }
[data-status="error"] { color: #dc3545; }
-
:is()支持逗号分隔的多个选择器，且不提升整体优先级，比用!important或追加 class 更安全 - 注意：Safari 15.4+、Chrome 100+、Firefox 100+ 才完整支持
:is()；旧版本需降级为重复书写或 JS 注入 class - 不要嵌套
:is(:is(...))，部分浏览器解析异常，直接扁平写
用 attr() 在伪元素中动态输出 data- 值
想让 tooltip 文字随 data-hint 变化，又不想用 JS 插入 DOM？attr() 能直接把属性值透传进 ::before / ::after 的 content。
立即学习“前端免费学习笔记（深入）”；
示例：
<span data-hint="点击复制链接">?</span>
[data-hint]::after { content: attr(data-hint); display: none; }
[data-hint]:hover::after { display: inline; }
-
attr()只读取字符串值，不能做计算或 fallback（如attr(data-x, "default")不合法） - 若属性值含空格或特殊字符（如
data-hint="用户未登录 → 请先授权"），CSS 里必须用双引号包裹content - 不支持在非
content属性中使用，比如width: attr(data-width px)是无效的
慎用 [data-*] 替代 class 处理高频样式切换
如果某个属性（如 data-theme="dark"）需要在全站频繁切换，靠 JS 批量修改 dataset 会触发大量重排重绘；此时不如用根级 class 控制，再用 :root 或 html 选择器承接。
- 高频变更场景（如深色模式开关）优先用
document.documentElement.classList.toggle('dark')，而不是遍历所有元素设data-theme -
[data-*]适合低频、局部、语义强的状态（如表单字段校验结果、卡片加载阶段），不适合全局主题或动画帧级更新 - DevTools 里调试时，
data-属性比 class 更显眼，但批量查找仍不如 class 名直观——建议保留有意义的 class 作结构标识，data-仅承载动态元信息
