CSS变量统一管理颜色和字体，提升代码效率
CSS变量（通过:root定义）是实现全站样式统一管理、提升可维护性与主题切换能力的高效方案，它能用语义化命名（如--color-brand而非--blue-500）避免硬编码、支持响应式字号与深色模式无缝切换，并兼容主流现代浏览器；但需警惕作用域陷阱、构建工具干扰（如CSS模块隔离或PostCSS误编译）、以及var()在@media、伪类和动画中的使用限制——掌握这些关键细节，才能真正让一次修改自动同步全站，告别重复劳动与协作混乱。
怎么用 :root 定义全局 CSS 变量
直接在 :root 里声明变量，所有后代元素都能访问，比写一堆重复的 color: #333 或 font-size: 16px 更省事。浏览器兼容性也够用（Chrome 49+、Firefox 31+、Safari 9.1+），IE 不支持，但真要兼容 IE 就别用变量了，老老实实复制粘贴。
常见错误是把变量写在某个 class 里，比如 .btn { --primary-color: #007bff; }，结果其他地方用不了——变量必须挂到 :root 或具体选择器作用域内才生效，全局就认 :root。
:root里定义：:root {<br> --text-primary: #212529;<br> --font-size-base: 16px;<br> --border-radius-sm: 4px;<br>}- 使用时用
var(--text-primary)，不能漏掉var()包裹 - 支持降级：比如
color: #212529; color: var(--text-primary);，前面是兜底值
颜色改一处，全站自动同步的关键点
变量不是“设完就完”，真正起效靠的是「语义化命名 + 层级复用」。比如别叫 --blue-500，而用 --color-brand，否则换主题时还得翻代码找所有 blue-500 替换。
容易踩的坑是颜色值硬编码进组件内部，比如按钮自己写 background: #007bff，绕过变量。结果运营说品牌色从蓝色改成青色，你得 grep 十几个文件手动改。
- 主色调、中性色、状态色（success / error）分开定义，避免混用
- 深色模式切换时，只重置
:root下变量值，不用改 HTML 类名或 JS 切换逻辑 - 慎用
rgba(var(--r), var(--g), var(--b), 0.8)这种写法——CSS 不支持在var()外再拆通道，得提前定义带透明度的变量，如--color-brand-weak
var() 在 @media 和伪类里怎么安全使用
变量可以动态响应媒体查询和交互状态，但必须确保变量已在作用域内定义。比如在 @media (prefers-color-scheme: dark) 里重设 :root 变量，是可行的；但若在 .card:hover 里临时定义 --hover-bg，然后想在子元素里用，大概率失效——因为子元素没继承这个作用域。
另一个典型问题是字体大小响应式：有人写 font-size: var(--font-size-base); @media (min-width: 768px) { :root { --font-size-base: 18px; } }，这不行——:root 是静态作用域，媒体查询里改它不触发重计算。得把媒体查询套在使用方上，或者用 clamp() 配合变量。
- 响应式字号推荐：
font-size: clamp(14px, var(--font-size-base), 18px);，再配合 JS 或媒体查询调--font-size-base ::before/::after能正常读var()，但注意 content 里只能用字符串变量，比如--icon-close: "×"; content: var(--icon-close);- 不要在
@keyframes里用var()控制动画数值，部分浏览器不支持（Chrome 115+ 才稳定）
Webpack/Vite 项目里变量没生效？检查这三个地方
不是代码写错，而是构建工具把 CSS 提取、压缩、作用域隔离搞乱了。最常见的是 CSS 模块（.module.css）默认局部作用域，:root 变量被当成模块内变量，外部用不了。
还有 PostCSS 插件（比如 postcss-custom-properties）如果开了 transform，会把 var(--x) 编译成固定值，失去动态性——这适合要兼容 IE 的场景，但你要的是运行时换肤，就得关掉它。
- Vite 用户：确认没启用
css.postcss.plugins中的变量编译插件 - Webpack + MiniCssExtractPlugin：确保所有 CSS 都打进同一个 bundle，别让第三方库的 CSS 独立加载导致
:root未执行 - 使用 CSS-in-JS（如 styled-components）时，变量得透传到
