:root 是定义全局 css 自定义变量的标准方式，应直接在 :root 中声明如 --primary-color: #3a86ff;，所有后代元素通过 var(--primary-color, #333) 安全读取，注意回退值、避免嵌套引用、媒体查询覆盖及 js 动态设置。
怎么用 :root 定义全局主题色变量
直接在 :root 里声明 CSS 自定义属性，所有后代元素都能通过 var() 读取——它不是“伪类”，是伪元素选择器（但行为上更像根作用域），浏览器从 IE11 开始支持，现代项目可放心用。
常见错误是写成 html:root 或套在 body 里，其实 :root 就等价于 html，但优先级略高，且语义更准确。
- 必须用双破折号前缀：
--primary-color，不能写成primary-color或$primary - 值要带单位（如
16px）或引号（如"bold"），颜色可写#3a86ff、rgb(58, 134, 255)或hsl(210, 100%, 61%) - 避免在
:root里引用其他变量（如var(--base-color)），部分旧版 Safari 会解析失败
:root {
--primary-color: #3a86ff;
--text-default: #2b2d33;
--border-radius: 8px;
}
如何在组件中安全使用 var(--xxx)
用 var() 读变量本身很简单，但容易忽略回退值和层叠污染问题。比如按钮用了 --primary-color，结果某个局部样式又重写了该变量，整个按钮就变色了——这不是 bug，是设计使然。
真正要注意的是：没设回退值时，一旦变量未定义，属性直接失效（不是继承父级，而是“丢弃”）。
- 务必写回退值：
color: var(--text-default, #333);，第二个参数只在变量不存在时生效 - 不要在
:root外重复声明同名变量（如.card { --primary-color: red; }），否则子元素读到的就是红色，而非全局值 - 媒体查询中可覆盖变量：
@media (prefers-color-scheme: dark) { :root { --text-default: #e6e6e6; } }
主题色切换时为什么有些元素没更新
变量本身是动态的，但触发重绘依赖“属性是否被重新计算”。如果某元素的样式规则里根本没用 var()，或者用了但被更高优先级的硬编码值覆盖（比如 color: #333 !important;），切换变量就毫无反应。
典型场景是第三方 UI 库组件（如 Ant Design 的 .ant-btn），它们往往内联写死颜色，不响应你的 --primary-color。
- 检查 computed styles：在 DevTools 里看目标元素最终生效的 color 值，确认它是否来自
var() - 避免用
!important覆盖变量调用，否则变量失去意义 - JavaScript 切换主题时，推荐操作
document.documentElement.style.setProperty('--primary-color', '#ff006e');，别去改整个:root样式块
兼容性与性能要注意什么
CSS 变量本身不触发重排，性能很好，但过度嵌套 var(var(--x)) 或在大量元素上高频读写（比如滚动时用 JS 改变量），可能引发渲染卡顿。
IE 完全不支持，如果还要兼容，得用 PostCSS 插件（如 postcss-css-variables）编译为静态值——但这会丢失运行时切换能力。
- Vue/React 组件中，不要在
style标签里用v-bind或useEffect频繁 setProperty，先做防抖 - Safari 15.4 之前有个 bug：动态修改
:root变量后，伪元素（::before）可能不更新，需强制触发重绘（如加个空transform） - 变量名别用中文或空格，Node.js 构建工具（如 Vite）对非 ASCII 变量名解析不稳定
变量不是银弹，它解决的是“集中定义 + 运行时可变”，但没法绕过 CSS 层叠规则和浏览器渲染机制。真要换肤，得从变量定义、组件消费、JS 控制三端对齐，漏一环就断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
