data-color属性+属性选择器才是真“条件样式”，因CSS变量无法触发选择器匹配，而[data-color="red"]等HTML属性选择器不依赖JS或新特性、全浏览器兼容，且语义化命名（如data-theme="dark"）更易维护。
data-color属性 + 属性选择器才是真“条件样式”
CSS变量本身不能触发选择器匹配，var(--color)只是值替换，不会让浏览器知道“当前颜色是red”。真正在CSS里做条件判断，得靠HTML属性——比如给元素加data-color="red"，再用[data-color="red"]写样式。这是唯一不依赖JS、不依赖新特性（如@property或if()）、所有浏览器都支持的方案。
常见错误是试图用style="--color: red"然后写[style*="red"]，这不可靠：style属性内容含空格、分号、单位，匹配极易断裂；且无法区分--color: red和--bg-color: red。
- HTML中显式声明语义化属性：
<button data-theme="dark">Save</button> - CSS中直接匹配：
[data-theme="dark"] { background-color: #1e293b; color: #f1f5f9; } - 避免用
data-color存原始色值（如data-color="#3b82f6"），优先用语义名（data-theme="blue"、data-status="error"），更易维护、可读性强
为什么不能用var(--color)配合:is()或media()模拟条件？
:is()和media()解决的是“选哪组规则”，不是“根据变量值选哪条声明”。比如你写color: if(media(width >= 768px), var(--color-lg), var(--color-sm))，它只在媒体查询满足时取对应变量值，但变量本身仍是静态的——--color-lg没变，就不会触发重计算。
真正需要“变量值驱动样式分支”的场景（如：若--severity为high，则边框变红+加粗），必须把该变量值同步到HTML属性上，否则CSS无从感知变化。
立即学习“前端免费学习笔记（深入）”；
- JS动态更新时，别只改
style.setProperty('--severity', 'high')，要同步写el.setAttribute('data-severity', 'high') - 如果用React/Vue，确保
data-属性随状态更新，而不是仅靠class或style绑定 -
supports(--severity: high)无效——supports()检测的是CSS语法/特性支持，不是变量值
用@property注册后，if(style(--x: y))能行吗？
理论上可以，但实际限制极多：Chrome/Edge 137+才支持if() + style()组合，Safari至今未落地；且style(--x: y)匹配的是完整声明字符串，--x: "high"和--x: high不等价；@property必须提前注册syntax，而字符串类型无法参与数值比较。
这意味着：它不适合颜色控制这类基础需求，更适合实验性功能或高度可控的内部工具。生产环境建议绕过。
- 已注册
@property --severity { syntax: "<custom-ident>"; ... }，style(--severity: high)才可能匹配成功 - 但即便匹配，
if()只能返回单个值，无法切换整个规则块（比如同时改color、border、box-shadow） - 一旦降级到不支持的浏览器，整段样式失效，无fallback机制
最简可行路径：变量定义 + 属性驱动 + 类名兜底
复杂度最低、兼容性最好、调试最直观的做法，是三层结构：CSS变量管颜色值，data-属性管逻辑分支，class名管降级样式。这样既保留CSS变量的动态优势，又让条件逻辑清晰可查。
- 在
:root定义：--color-error: #dc3545; --color-success: #28a745; - HTML中写：
<span data-status="error">Failed</span> - CSS中写：
[data-status="error"] { color: var(--color-error); }，再补一句.status-error { color: #dc3545; }作为IE/Firefox旧版兜底 - JS只需同步更新
data-status和class，无需操作style对象
关键点在于：颜色值和条件逻辑必须解耦。变量负责“是什么颜色”，属性负责“什么时候用这个颜色”——混在一起，迟早掉坑里。
