做前端时间久了你一定会遇到这种场景一个按钮要管四五个状态默认、加载中、成功、失败、禁用代码里全是.is-loading、.is-success、.is-error这种类名。改一个状态得先把上一个类名 remove 掉再 add 新的稍不留神就出现两个状态类名同时在 DOM 上的尴尬场面。我在这上面踩过太多次坑后来换了一套思路用>button classbtn btn-primary is-loading保存/button button classbtn btn-primary is-success已保存/button button classbtn btn-primary is-error保存失败/button看着还行但 JS 里切换逻辑就开始绕了// 切到 loading 状态 btn.classList.remove(is-success) btn.classList.remove(is-error) btn.classList.add(is-loading)每次都要先把其他状态类名清干净再添加目标类名。状态组合一旦变多忘记清某个类名就会出现两个状态样式叠加的 bug。我见过最离谱的情况是按钮同时带着is-loading和is-success转圈图标和绿色对勾一起显示排查了半天才发现是上个状态没清干净。这套做法的另一个隐性成本是类名只是字符串没有值域的概念。项目里写.is-loading的人和写.loading的人很可能表达的是同一个状态但两个类名互不相通。时间一长样式文件里全是疑似重复的状态类名谁都不敢删。1.2 data 属性和 class 的本质区别一个是值一个是标签>!-- class 方式标记有没有这个类名 -- button classbtn is-loading保存/button !-- data 方式状态字段的值是什么 -- button classbtn>.btn { /* 基础样式 */ } .btn[data-stateloading] { /* loading 专属样式 */ }这样优先级永远比单个 class 高覆盖关系清晰可控不用靠!important。反过来如果单独写[data-stateloading]不带类名就得靠样式表里放最后才能生效脆弱得很。2.3 复合选择器与状态组合写法data 属性可以和伪类、结构选择器自由组合能写出很多巧妙的规则。比如我想让状态为 success 的按钮在后面显示一个对勾.btn[data-statesuccess]::after { content: ✓; }或者只针对表单里数据校验失败的输入框做红色高亮.form-field[data-validfalse] input { border-color: #e35b5b; }组合选择器的时候要注意一个细节状态值变了CSS 规则是自动响应的。你不需要在 JS 里同步增删类名只要>button classbtn>.btn { width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border: 1px solid #d0d7de; border-radius: 6px; background: #f6f8fa; cursor: pointer; transition: all 0.2s; } .btn[data-stateloading] { cursor: wait; opacity: 0.7; pointer-events: none; } .btn[data-stateloading] .btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0, 0, 0, 0.2); border-top-color: #333; border-radius: 50%; animation: spin 0.8s linear infinite; } .btn[data-statesuccess] { border-color: #2da44e; background: #dafbe1; color: #1a7f37; } .btn[data-stateerror] { border-color: #cf222e; background: #ffebe9; color: #cf222e; }JS 切换状态的代码变成了给字段赋值干净了很多const btn document.querySelector(.btn) // 提交中 btn.dataset.state loading // 成功 / 失败 btn.dataset.state success btn.dataset.state error这里有个细节pointer-events: none放在 loading 状态里是为了防止用户在请求进行中重复点击。如果用 class 方式写你得记得在每次切回 idle 时把这个禁用去掉用 data 方式只要>div classtabs button classtab>.tab[data-activetrue] { background: #fff; border-bottom-color: #fff; color: #0969da; font-weight: 600; }JS 里切换就一行核心逻辑tabs.forEach(tab { tab.dataset.active String(tab currentTab) })这里有一个新手容易踩的坑dataset里存的所有值都会转成字符串。你写tab.dataset.active trueDOM 里实际是>div classform-field>.form-field[data-validfalse] input { border-color: #cf222e; box-shadow: 0 0 0 3px rgba(207, 34, 46, 0.15); } .form-field[data-validfalse] .error-msg { display: block; color: #cf222e; } .form-field[data-validtrue] input { border-color: #2da44e; }JS 校验函数里只要在最后写一句field.dataset.valid isValid ? true : false所有对应样式自动到位。这个模式的好处在于校验状态是存在组件自己的 DOM 节点上的谁看都能理解当前校验到哪一步了。调试的时候打开 DevTools一眼就能看到哪些字段不通过不需要去 JS 内存里翻状态对象。3.4 列表排序指示data 属性还能省掉伪元素逻辑还有一个我常用的场景是表格排序。表头点击切换升序、降序以前我可能要维护两个 class或者用 JS 直接改元素的文本箭头。现在>th>th[data-sortasc] .sort-icon::after { content: ↑; color: #0969da; } th[data-sortdesc] .sort-icon::after { content: ↓; color: #0969da; } th[data-sortnone] .sort-icon::after { content: ↕; color: #8c959f; }这个写法的好处是把状态的视觉反馈和状态的存储放在了一个地方。JS 只需要负责改值排序箭头的样式渲染完全交给 CSS。如果后面想把箭头改成图标字体也只改 CSS不动 JS 和 HTML。4. JS 和 data 状态怎么配合最舒服data 属性只是载体真正让它转起来的是 JS。这里面的配合细节不少光是一个怎么给字段赋值就有好几种写法用错了还挺容易被自己坑到。4.1 dataset vs setAttribute改状态的两种姿势给元素设置 data 属性有两套 API对应两种使用习惯// 方式一dataset btn.dataset.state loading btn.dataset.active true // 方式二setAttribute btn.setAttribute(data-state, loading) btn.setAttribute(data-active, true)dataset的写法更短但它有几个容易被忽略的规则。第一个是名字映射HTML 里的>// 正确删掉整个属性 btn.removeAttribute(data-state) // 或者用 dataset 的 delete delete btn.dataset.state // 不推荐留一个空字符串属性 btn.dataset.state 留空字符串最大的隐患是如果你写过[data-state]这种存在即匹配的选择器空字符串属性也会触发样式。空值被当成了一个合法状态这是最隐蔽的踩坑点。4.2 声明状态枚举写给队友和未来的自己用 data 属性管理状态只在一个人脑子里清楚有哪些状态值是远远不够的。状态字段迟早会交到别人手里所以我强烈建议把每个 data 字段的合法值范围写清楚放在组件文档里或者代码注释顶部/** *>.btn:not([data-state]) { /* 没有状态字段时按 idle 处理 */ }我在实际项目里曾经把>html>:root[data-themelight] { --bg-color: #ffffff; --text-color: #1f2328; --border-color: #d0d7de; --accent-color: #0969da; } :root[data-themedark] { --bg-color: #0d1117; --text-color: #c9d1d9; --border-color: #30363d; --accent-color: #58a6ff; } body { background: var(--bg-color); color: var(--text-color); }主题切换的 JS 只需要一行document.documentElement.dataset.theme dark所有引用了var(--bg-color)的组件在一个帧内全部切换完成。这个方案比直接写body.dark .card { ... }这种覆盖式方案好维护得多因为变量是一处定义、全局生效不需要为每个组件单独写暗色样式覆盖。密度模式也可以用同样的思路html[data-densitycompact]下把间距变量整体调小组件不用改任何代码就能自适应紧凑布局。我看到有些后台系统把主题、密度、字号模式全部用 data 属性挂在html上用一套代码支撑了多种视觉配置就是这个模式的扩展应用。5.2 attr() 的边界为何不能拿 data 数值做计算这里要提醒一个容易踩的坑尝试用attr()把 data 属性里的数值取出来参与calc()计算在目前绝大多数浏览器里是不行的。attr()函数在 CSS 里主要支持的是content属性用在其他属性上兼容性很差/* 想要的效果别这么写行不通 */ .progress[data-percent60] { width: attr(data-percent); }如果确实需要拿 JS 里的数值驱动样式两个更靠谱的方向一是用 CSS 自定义属性直接在元素上内联设置div classprogress style--percent: 60%/div.progress { width: var(--percent); }二是直接用 data 属性加提前定义好几档固定的样式类.progress[data-levellow] { width: 25%; } .progress[data-levelmid] { width: 60%; } .progress[data-levelhigh] { width: 90%; }Data 属性存的是状态的语义值而不是需要被解析的原始数据。如果数值真的要参与视觉计算CSS 变量才是更合适的通道别硬用 data 属性扛这个职责。6. 兼容性、安全性和常见坑速查最后把这些年攒下来的兼容性结论、安全问题、踩坑案例集中整理一下。这几块内容在文档里不好找但实际项目里几乎一定会遇到。6.1 浏览器兼容性现状CSS 属性选择器的兼容性比很多人想象中好。精确匹配和存在匹配在 IE7 时代就有了带通配符的^$*从 IE7 也支持现代浏览器全线支持。所以整套方案在生产环境没有任何兼容性障碍。有一个值得注意的点属性选择器的i标志忽略大小写稍微新一点比如[data-stateloading i]会把Loading、LOADING都匹配上。现代浏览器支持但老 Edge 和早期 Safari 不认。我在代码规范里直接要求状态值统一小写不用i标志这样既保证兼容性也让状态值看起来更规整。CSS 自定义属性方面var()在 IE11 不支持不过这个基本属于常识了需要支持 IE11 的项目直接用 data 属性 覆盖样式这种更古老的方案不要在变量上较劲。6.2 属性值安全别把用户输入直接当选择器这是我很想强调的一点。data 属性可以存任何字符串但如果这个字符串来自用户输入又拿它做了 CSS 属性选择器的匹配对象就可能出现意外。举个例子你在用户昵称上挂了>