用CSS自定义属性映射状态颜色的正确做法是：先通过属性选择器（如[data-state="error"]）声明--state-color等变量，再在通用规则中用var(--state-color)消费，实现状态与样式的解耦和集中维护。
如何用CSS自定义属性映射状态颜色
直接说结论：用 --state-color 这类自定义属性 + :is() 或属性选择器，比写一堆重复的 color: #e74c3c 更易维护，也更贴近状态驱动的逻辑。关键不是“能不能”，而是“怎么让状态和颜色真正解耦”。
状态名必须映射到合法CSS标识符
浏览器不认 data-status="error" 本身是字符串，它只认你写的 CSS 规则是否匹配。所以不能指望 [data-status="error"] { --state-color: #e74c3c; } 自动生效——除非你在后续规则里显式用到 var(--state-color)。
- ✅ 正确做法：先声明变量，再消费变量，比如
.btn[data-status="success"] { --state-color: #2ecc71; }，然后统一写.btn { color: var(--state-color, #95a5a6); } - ❌ 常见错误：只在元素上设
style="--state-color: #e74c3c"却没在样式表里引用var(--state-color)，颜色根本不会应用 - ⚠️ 注意：状态值如
"is-disabled"、"has-warning"中的连字符是合法的，但"user:logged-in"的冒号会破坏语法，得换成"user-logged-in"
避免在每个状态类里重复写颜色声明
很多人写成这样：.status-error { color: #e74c3c; } .status-warning { color: #f39c12; }——看似简单，但一旦要改所有 error 状态的背景、边框、图标颜色，就得改三处。用自定义属性能收敛到一处：
.status {
color: var(--state-color, #95a5a6);
border-color: var(--state-border, #bdc3c7);
background-color: var(--state-bg, #ecf0f1);
}
.status[data-state="error"] {
--state-color: #e74c3c;
--state-border: #c0392b;
--state-bg: #fdf2f2;
}
.status[data-state="success"] {
--state-color: #2ecc71;
--state-border: #27ae60;
--state-bg: #f1faee;
}
这样，只要改 --state-color 的值，所有用到它的属性都会同步更新。
立即学习“前端免费学习笔记（深入）”；
动态状态切换时注意变量作用域与继承
自定义属性默认继承，但如果你在父容器上设了 --state-color，子元素又没覆盖，就会意外继承——尤其在组件嵌套或 Shadow DOM 场景下容易出错。
- ✅ 推荐加一层明确的作用域，比如只在带
data-state的元素及其直系子元素上生效：[data-state] > *, [data-state]::before, [data-state]::after { color: var(--state-color); } - ⚠️
!important不能覆盖自定义属性的计算值，只能覆盖最终的color属性；想强制重置变量，得用--state-color: initial或重新赋值 - ? 浏览器 DevTools 里可以实时编辑
style中的--state-color，是调试状态映射最快的方式
最常被忽略的是：状态变更后，如果 JS 只改了 dataset.state 却没触发重排（比如没改 class 或没操作 style），变量虽然更新了，但某些旧版 Safari 可能不会立刻重绘——保险起见，可临时加 el.style.transform = 'scale(1)' 强制刷新。
