企业官网建设流程全解析

做前端时间久了，你一定会遇到这种场景：一个按钮要管四五个状态，默认、加载中、成功、失败、禁用，代码里全是.is-loading、.is-success、.is-error这种类名。改一个状态，得先把上一个类名 remove 掉，再 add 新的，稍不留神就出现两个状态类名同时在 DOM 上的尴尬场面。我在这上面踩过太多次坑，后来换了一套思路：用><button class="btn btn-primary is-loading">保存</button> <button class="btn btn-primary is-success">已保存</button> <button class="btn 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 class="btn is-loading">保存</button> <!-- data 方式：状态字段的值是什么 --> <button class="btn">.btn { /* 基础样式 */ } .btn[data-state="loading"] { /* loading 专属样式 */ }

这样优先级永远比单个 class 高，覆盖关系清晰可控，不用靠!important。反过来，如果单独写[data-state="loading"]不带类名，就得靠样式表里放最后才能生效，脆弱得很。

2.3 复合选择器与状态组合写法

data 属性可以和伪类、结构选择器自由组合，能写出很多巧妙的规则。比如我想让状态为 success 的按钮，在后面显示一个对勾：

.btn[data-state="success"]::after { content: "✓"; }

或者只针对表单里"数据校验失败"的输入框做红色高亮：

.form-field[data-valid="false"] input { border-color: #e35b5b; }

组合选择器的时候要注意一个细节：状态值变了，CSS 规则是自动响应的。你不需要在 JS 里同步增删类名，只要><button class="btn">.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-state="loading"] { cursor: wait; opacity: 0.7; pointer-events: none; } .btn[data-state="loading"] .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-state="success"] { border-color: #2da44e; background: #dafbe1; color: #1a7f37; } .btn[data-state="error"] { 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 class="tabs"> <button class="tab">.tab[data-active="true"] { 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 = true，DOM 里实际是><div class="form-field">.form-field[data-valid="false"] input { border-color: #cf222e; box-shadow: 0 0 0 3px rgba(207, 34, 46, 0.15); } .form-field[data-valid="false"] .error-msg { display: block; color: #cf222e; } .form-field[data-valid="true"] input { border-color: #2da44e; }

JS 校验函数里只要在最后写一句field.dataset.valid = isValid ? 'true' : 'false'，所有对应样式自动到位。这个模式的好处在于，校验状态是存在组件自己的 DOM 节点上的，谁看都能理解当前校验到哪一步了。调试的时候打开 DevTools，一眼就能看到哪些字段不通过，不需要去 JS 内存里翻状态对象。

3.4 列表排序指示：data 属性还能省掉伪元素逻辑

还有一个我常用的场景是表格排序。表头点击切换升序、降序，以前我可能要维护两个 class，或者用 JS 直接改元素的文本箭头。现在><th>th[data-sort="asc"] .sort-icon::after { content: "↑"; color: #0969da; } th[data-sort="desc"] .sort-icon::after { content: "↓"; color: #0969da; } th[data-sort="none"] .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-theme="light"] { --bg-color: #ffffff; --text-color: #1f2328; --border-color: #d0d7de; --accent-color: #0969da; } :root[data-theme="dark"] { --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-density="compact"]下把间距变量整体调小，组件不用改任何代码就能自适应紧凑布局。我看到有些后台系统把主题、密度、字号模式全部用 data 属性挂在html上，用一套代码支撑了多种视觉配置，就是这个模式的扩展应用。

5.2 attr() 的边界：为何不能拿 data 数值做计算

这里要提醒一个容易踩的坑：尝试用attr()把 data 属性里的数值取出来参与calc()计算，在目前绝大多数浏览器里是不行的。attr()函数在 CSS 里主要支持的是content属性，用在其他属性上兼容性很差：

/* 想要的效果（别这么写），行不通 */ .progress[data-percent="60"] { width: attr(data-percent); }

如果确实需要拿 JS 里的数值驱动样式，两个更靠谱的方向：一是用 CSS 自定义属性，直接在元素上内联设置：

<div class="progress" style="--percent: 60%"></div>

.progress { width: var(--percent); }

二是直接用 data 属性加提前定义好几档固定的样式类：

.progress[data-level="low"] { width: 25%; } .progress[data-level="mid"] { width: 60%; } .progress[data-level="high"] { width: 90%; }

Data 属性存的是"状态的语义值"，而不是"需要被解析的原始数据"。如果数值真的要参与视觉计算，CSS 变量才是更合适的通道，别硬用 data 属性扛这个职责。

6. 兼容性、安全性和常见坑速查

最后把这些年攒下来的兼容性结论、安全问题、踩坑案例集中整理一下。这几块内容在文档里不好找，但实际项目里几乎一定会遇到。

6.1 浏览器兼容性现状

CSS 属性选择器的兼容性比很多人想象中好。精确匹配和存在匹配在 IE7 时代就有了，带通配符的^=$=*=从 IE7 也支持，现代浏览器全线支持。所以整套方案在生产环境没有任何兼容性障碍。

有一个值得注意的点：属性选择器的i标志（忽略大小写）稍微新一点，比如[data-state="loading" i]会把Loading、LOADING都匹配上。现代浏览器支持，但老 Edge 和早期 Safari 不认。我在代码规范里直接要求：状态值统一小写，不用i标志，这样既保证兼容性，也让状态值看起来更规整。

CSS 自定义属性方面，var()在 IE11 不支持，不过这个基本属于常识了，需要支持 IE11 的项目直接用 data 属性 + 覆盖样式这种更古老的方案，不要在变量上较劲。

6.2 属性值安全：别把用户输入直接当选择器

这是我很想强调的一点。data 属性可以存任何字符串，但如果这个字符串来自用户输入，又拿它做了 CSS 属性选择器的匹配对象，就可能出现意外。

举个例子，你在用户昵称上挂了>