纯CSS无法让data-属性驱动CSS变量实时变化，必须通过JS修改document.documentElement的data-theme并配合CSS选择器响应，attr()不能用于动态读取data-值，变量需被var()显式调用才生效。
纯 CSS 无法让 data- 属性“驱动” CSS 变量实时变化，所谓“神奇用法”其实是把 data- 当作状态信标，靠 JS 主动写入变量值——CSS 只负责响应，不负责监听。
为什么[data-theme]选择器不能自动更新--color变量
CSS 属性选择器匹配的是 DOM 状态快照，不是响应式监听器。你写 [data-theme="dark"] { --bg: #121212; }，这只在元素拥有该属性时生效；但如果你用 JS 改了 data-theme 值，CSS 变量不会自动重算——因为 --bg 是在规则块里“静态赋值”的，不是从属性值动态读取的。
-
attr(data-theme)只能在content属性中用，且不能用于var()或其他样式声明 - 浏览器不把
data-当作 CSS 变量源，它只是个 HTML 属性，和id或class一样，只触发选择器匹配 - 所有看似“绑定”的效果，背后都有 JS 在调用
element.style.setProperty()或document.documentElement.style.setProperty()
data-theme必须设在document.documentElement上才有效
因为 :root 对应的就是 html 元素，所有全局 CSS 变量都从这里继承。如果把 data-theme="dark" 写在 <body> 或某个 <div> 上，[data-theme="dark"] 选择器能匹配到，但定义在 :root 里的变量根本不会被覆盖——作用域断了。
- 错误写法：
document.body.setAttribute('data-theme', 'dark')→:root没变，变量不变 - 正确写法：
document.documentElement.setAttribute('data-theme', 'dark') - 服务端渲染时，直接在
<html data-theme="light">标签上写死，避免 FOUC
用dataset读取data-值时命名必须全小写+连字符
HTML 解析器对 data- 属性名极其严格：只认小写字母、数字、连字符（-），其余一律忽略。JS 的 dataset API 会自动把连字符转成驼峰，但前提是 HTML 里写对了。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<div data-user-id="123">→el.dataset.userId可读 - ❌ 无效：
<div data-userId="123">或<div data_user_id="123">→el.dataset.userId返回undefined - 数字开头要加引号：
<div data-2024-report="done">→ 必须用el.dataset["2024Report"]访问 - 值永远是字符串：
el.dataset.count === "5"，不是数字5，别直接拿它做数值比较
过渡动画要加在使用var()的属性上，而不是变量本身
CSS 变量没有过渡能力，transition: --bg 0.3s 是无效语法。真正需要过渡的是那些引用变量的属性，比如 background-color、color、border-color。
- ✅ 正确：
body { background-color: var(--bg); transition: background-color 0.3s ease; } - ❌ 无效：
:root { transition: --bg 0.3s; }→ 浏览器直接忽略 - 多个属性要显式列出：
transition: background-color 0.3s, color 0.3s, border-color 0.3s; - 伪元素（
::before、::after）和 fixed 元素也得单独加 transition，否则切主题时会突变
最易被忽略的一点：CSS 变量必须被 var() 显式调用才起作用。定义了 --text-color 却没在任何地方写 color: var(--text-color)，等于白写；尤其容易漏掉 svg fill、box-shadow、border 这些非基础属性。
