用 :root 定义 CSS 全局品牌色需在 :root { --primary: #007bff; } 中声明变量，确保位置靠前、命名规范（中划线）、避免局部重定义；兼容性要求 IE 不支持，fallback 仅作降级兜底，JS 可读写但无法监听变化。
怎么用 :root 定义 CSS 全局品牌色
直接在 :root 里声明自定义属性，就能全局复用颜色值。它本质是 CSS 变量的注册入口，浏览器会把它们挂载到 document 的根元素上，所有后代元素都能通过 var(--primary) 访问。
- 写法必须是
:root { --primary: #007bff; }，不能写成html { --primary: ... }——虽然效果看似一样，但:root是规范推荐且语义更准的写法 - 变量名建议用中划线分隔（如
--text-secondary），避免驼峰或下划线，CSS 对后者支持不一致 - 声明位置要早于使用处：通常放在
<style></style>块最顶部，或单独的base.css中优先引入
为什么不能在 class 或组件里重定义同名变量
因为 CSS 自定义属性遵循“就近原则”，但重定义会覆盖而非合并。比如你在某个按钮里写了 .btn { --primary: #dc3545; }，那它内部所有用 var(--primary) 的地方都会变红——但这个改动不会影响其他组件，也不会回传给 :root。
- 常见错误：以为在组件里改一次
--primary就能“切换主题”，其实只是局部覆盖；真要做主题切换，得在:root上批量替换，或用[data-theme="dark"] :root这类选择器提前定义好两套 - 性能无额外开销：变量本身不触发重排重绘，但频繁通过 JS 修改
:root的值（比如每帧都改）可能引发样式计算抖动 - 兼容性注意：IE 完全不支持，
Edge 15+开始支持，移动端基本全覆盖（iOS 9.3+、Android 4.4+）
var(--color) 的 fallback 怎么写才真正生效
fallback 不是“备选方案”，而是“降级兜底值”——只在变量未定义或语法错误时起作用。很多人误以为它能做条件判断，其实不能。
- 正确写法：
color: var(--text-primary, #333);，第二个参数必须是合法 CSS 值，不能是另一个var() - 错误写法：
var(--text-primary, var(--text-default))—— 多层嵌套 fallback 不被解析，整个声明会失效 - 调试技巧：Chrome DevTools 里 hover 到
var(--xxx)会显示当前计算出的值；如果显示invalid，说明变量名拼错、没声明、或 fallback 写法非法
JS 动态读写 :root 颜色变量的实际限制
JS 可以用 getComputedStyle(document.documentElement).getPropertyValue('--primary') 读，用 document.documentElement.style.setProperty('--primary', '#28a745') 写，但要注意边界。
立即学习“前端免费学习笔记（深入）”；
- 读取返回的是字符串（带空格和单位），比如
" #007bff "，需要用.trim()清理 - 写入时不能省略引号，
setProperty('--primary', 'rgb(0, 123, 255)')可以，但setProperty('--primary', 007bff)会报错 - 无法监听变量变化：CSS 自定义属性没有 MutationObserver 对应机制，想响应式更新 UI，得自己封装 setter 或结合 CSSOM API 轮询
真正麻烦的不是定义颜色，而是当设计系统里出现 --primary-light、--primary-dark 这类衍生色时，它们没法靠 CSS 自动计算——你得手动维护，或者用 Sass/Less 预处理生成，再注入到 :root。这点容易被忽略。
