1. 为什么我会关注>button classsubmit-btn>.submit-btn[data-statusidle] { background-color: #1677ff; }只有当按钮的>div classcard is-selected is-expanded is-highlighted theme-dark内容/div这种情况下用户看 HTML 可能会困惑“这几个 class 到底谁控制颜色谁控制边框谁控制加粗”。如果你想在 JavaScript 里切换某一个状态最土的方式是classList.remove一大串再classList.add另一大串。一旦某个状态对应好几个 class漏一个就麻烦了。>div classcard>.card[data-statusselected] { border-color: #1677ff; box-shadow: ...; } .card[data-statusexpanded] { height: auto; } .card[data-statusselected][data-statusexpanded] { ... }等等这里有一个很坑的细节同一个元素上同一个属性不能同时存在两个值。>div classupload-box iduploadBox>.upload-box[data-statuswaiting] .upload-text { color: #666; } .upload-box[data-statusuploading] .upload-icon { animation: spin 1s linear infinite; } .upload-box[data-statusuploading] .upload-text { color: #1677ff; } .upload-box[data-statussuccess] .upload-text { color: #52c41a; } .upload-box[data-statuserror] .upload-text { color: #ff4d4f; }这样写的好处是整个 CSS 区块像一张状态表标签一眼就能扫完什么时候文字变蓝什么时候图标转圈什么时候变绿变红清清楚楚。不需要纠结是否要给元素加一个.is-uploading的 class再考虑移除其他 class。我们只需要维护一个>.btn[data-statusloading], .btn[data-statusdisabled] { pointer-events: none; opacity: 0.6; } .btn[data-statusloading] .icon { display: inline-block; animation: spin 1s linear infinite; } .btn[data-statusdisabled] { background: #f5f5f5; color: #999; }看到没有公共的禁交互行为可以合并写视觉差异可以单独再补。状态越多这种拆分方式越有价值。如果你用 class 来做那就要写.is-loading、.is-disabled然后为了合并公共样式还得额外写一个.is-inactive之类的类名不仅麻烦而且在别人读代码的时候会怀疑“什么时候要加双类名”。2.3 结合 CSS 优先级与特异性使用属性选择器需要留个心眼就是优先级specificity。[data-statuswaiting]和.class在优先级上是同一级别的都属于“类选择器”这个等级。所以如果某个元素同时有 class 设置颜色和>.text { color: red; } [data-statuserror] .text { color: red; }两行代码都没问题但如果某天我把.text的默认颜色改成黑色却忘了调整后面的状态覆盖那页面上错误状态下的文字仍然是黑色因为.text这行写在后面。所以在组织 CSS 时我的习惯是把基于状态的样式统一放在组件样式之后形成一个明确的“状态层”。这样调试的时候会非常舒服。如果你担心优先级太乱也可以写得再精确一点.error-text[data-statuserror] { color: red; }但这种写法会让每个元素都要挂上>button idsubmitBtn classbtn>const btn document.getElementById(submitBtn); btn.addEventListener(click, () { // 先置为 loading 状态 btn.dataset.status loading; // 模拟请求 setTimeout(() { btn.dataset.status success; }, 1500); });这里有一个经常出现的误解有人说“用setAttribute(data-status, loading)和dataset.status效果一样”。答案是最终效果一致但有一定细节差别。dataset是 DOM 对象上读取 data 属性的便捷接口底层也是操作属性。如果你用setAttribute同样可以btn.setAttribute(data-status, loading);两者写出来的代码语义差不多。我推荐统一用dataset因为更短更清晰。但要记住dataset的命名映射规则HTML 里>const UploadStatus { IDLE: idle, UPLOADING: uploading, SUCCESS: success, ERROR: error, };然后业务逻辑里这么写box.dataset.status UploadStatus.UPLOADING;这样写还有一个额外的好处当你需要调整状态值时只用改常量定义不用满项目翻字符串。如果配合 TypeScript还能用字符串联合类型进一步约束状态范围type Status idle | uploading | success | error;这种强约束能让你在写组件时少踩不少低级错误尤其是团队协作时。虽然本篇文章主要讲 CSS 里的>button classsubmit-btn>.submit-btn .btn-loading { display: none; } .submit-btn[data-statusloading] .btn-loading { display: inline-block; animation: spin 1s linear infinite; } .submit-btn[data-statusloading] .btn-text::after { content: 提交中…; }文字这里我用伪元素::after覆盖显示“提交中”这样不需要每次在 JS 里改innerText。当然这个技巧要看场景如果按钮文字是动态的那可以改成用 CSS 变量或者 JS 直接改文本。不管怎样核心思路是同一个状态驱动视图js 只需要负责改状态值不用管那个部件该显示什么样子。失败态也一样比如.submit-btn[data-statuserror] { border-color: #ff4d4f; background: #fff1f0; } .submit-btn[data-statuserror] .btn-text::after { content: 提交失败点击重试; }JS 那边在请求 catch 里写一句btn.dataset.status error再把错误信息显示到某个>form idregisterForm classregister-form>.register-form .btn-spinner { display: none; } .register-form .form-alert { display: none; } /* 表单处于 loading 状态隐藏普通文本显示 spinner并禁用按钮 */ .register-form[data-statusloading] .btn-spinner { display: inline-block; animation: spin 1s linear infinite; } .register-form[data-statusloading] .btn-text { display: none; } .register-form[data-statusloading] .submit-btn { pointer-events: none; opacity: 0.7; } /* 表单处于 success 状态直接隐藏按钮里原有文字换成功文案 */ .register-form[data-statussuccess] .btn-text { visibility: hidden; } .register-form[data-statussuccess] .btn-text::after { content: 注册成功 ✓; visibility: visible; } .register-form[data-statussuccess] .submit-btn { pointer-events: none; border-color: #52c41a; } /* 表单处于 error 状态红色边框和错误横幅 */ .register-form[data-statuserror] .form-alert { display: block; color: #ff4d4f; background: #fff1f0; border-color: #ffa39e; } .register-form[data-statuserror] .submit-btn { border-color: #ff4d4f; }这里有个小技巧为了让按钮文字可以在不修改 JS 的情况下切换我把原文本通过visibility: hidden隐藏掉然后在伪元素里写新内容。伪元素中的文本是content里的内容不会受visibility: hidden影响前提是伪元素本身visibility: visible。这个做法不算新鲜但很实用。再写 JavaScriptconst form document.getElementById(registerForm); form.addEventListener(submit, async (e) { e.preventDefault(); const username document.getElementById(username).value.trim(); const email document.getElementById(email).value.trim(); // 前端校验不通过让表单进入 error 状态 if (!username || !email) { form.dataset.status error; return; } // 进入 loading 状态 form.dataset.status loading; try { const resp await fetch(/api/register, { method: POST, body: JSON.stringify({ username, email }), }); if (!resp.ok) throw new Error(http error); form.dataset.status success; } catch (err) { form.dataset.status error; } });这样整个提交流程的视图切换几乎全部集中在form.dataset.status xxx这一行。如果以后要支持更多状态比如限流提示、已注册过我只需要再扩展状态常量、增加一个 CSS 规则块业务逻辑上再加一个分支就能完成。4.3 效果与扩展我觉得这个方案最迷人的地方在于它的可扩展性。想象一下后续产品想在“注册成功”状态下额外显示一个“去登录”按钮我不需要改 CSS只需要在 HTML 里加一个按钮并按>a classgo-login href/login hidden去登录/a然后在 CSS 里加.register-form[data-statussuccess] .go-login { display: inline-block; }原先注册按钮的文字会在success状态被伪元素改掉新增的按钮也同时出现。整个过程对原有代码零侵入。这就是状态驱动样式的好处状态是唯一事实来源任何 UI 部分都可以基于状态去响应。如果你是在 Vue 项目里其实完全可以直接绑定form :data-statusstatus在 React 里也有类似思路不过 React 通常直接操作 style 或者 className用>btn.dataset.status loading ;这样值就变成了\n loading \n当然无法匹配[data-statusloading]。应对方法比较土但也有效把所有状态常量集中初始化并且对从外部读取的 data 值做 normalizationfunction normalizeStatus(value) { return String(value || ).trim(); }如果你团队里有后端返回的状态值参与驱动那就更要小心。比如后端返回Loading带大写CSS 里写成小写就会失败。我的建议是永远在入口处把后端状态映射成项目内约定的一套小写常量然后再赋给>box.setAttribute(data-status, idle); void box.offsetWidth; // 强制 reflow box.setAttribute(data-status, error);这个技巧叫做“类名重触发动画”的经典套路同样适用于>button classsubmit-btn>
