<p>必须用 :root 声明 CSS 颜色变量以确保全局可访问，命名需以 -- 开头、区分大小写且无空格或中文；引用时必须提供 fallback 值防止失效；响应式需在 @media 中重定义；IE 不支持需降级处理。</p>
在 :root 里声明 CSS 颜色变量，不是随便写个 -- 就能用
必须用 :root（而非 html 或其他选择器）才能确保全局可访问；-- 开头的自定义属性名区分大小写，且不能含空格、运算符或中文。常见错误是写成 color-primary: #333（漏了两个短横）或 --color primary（带空格），浏览器直接忽略。
-
:root是伪类，代表文档根元素（通常是html），它的作用域天然覆盖整个文档 - 声明位置建议统一放在
<style>块顶部或独立 CSS 文件开头，避免被后续同名变量覆盖 - 值可以是任何合法 CSS 值：
#fff、rgb(255, 0, 0)、hsl(120, 100%, 50%)，甚至另一个var(--xxx)
用 var() 引用变量时，fallback 值不是可选项，而是保命机制
当 var(--color-text) 找不到定义、拼错名、或父级未继承时，浏览器不会报错，而是直接跳过该声明——整条 CSS 规则可能失效。比如 color: var(--text-color); 变量不存在，color 就变成初始值（通常是 inherit），页面文字突然变色或消失。
- 必须提供 fallback：
color: var(--text-color, #333);，第二个参数在变量不可用时兜底 - fallback 可以是另一个
var()：var(--text-color, var(--fallback-color, #000)) - 不能在
var()外再套函数：rgba(var(--primary-rgb), 0.8)❌，要写成color: rgba(12, 34, 56, 0.8)或改用hsla()等支持变量的函数
颜色变量和媒体查询、CSS-in-JS、CSS 框架混用时的坑
变量本身不响应式，但可以配合 @media 重定义。很多开发者误以为改一次 :root 就全站变色，结果发现暗色模式下没生效——因为没在对应媒体查询里重新赋值。
- 暗色模式需显式覆盖：
@media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a1a; --text-color: #eee; } } - React/Vue 中用
style={{ backgroundColor: 'var(--bg-color)' }}可行，但注意：JS 字符串里的var()不会被 CSS 引擎解析，得靠浏览器运行时计算，所以必须确保变量已声明 - Tailwind 等工具类框架默认不读取 CSS 变量，
bg-[--bg-color]这类写法需开启 JIT 和自定义插件才支持
IE 不支持 var()，但现代项目真要兼容？
IE11 完全不识别 var() 和 :root 自定义属性，所有引用会静默失败。如果你的项目还要求支持 IE，就别用 var() 控制核心颜色，或者必须配 PostCSS 插件（如 postcss-custom-properties）做编译时降级。
立即学习“前端免费学习笔记（深入）”；
- 编译后生成冗余声明：
color: #333; color: var(--text-color, #333);，IE 用前者，现代浏览器用后者 - 注意降级后无法动态切换主题——编译时就固定死了
- 如果只支持 Chrome/Firefox/Safari/Edge 80+，放心用，不用 polyfill
变量能不能跨 Shadow DOM 传递、CSSOM 里怎么读写、是否影响重排重绘……这些确实存在，但日常开发里，90% 的问题都出在声明位置不对、拼写错误、漏 fallback 或忘了在媒体查询里重定义。把这四点盯死，比研究底层机制更管用。
