CSS变量应严格分层：基础设计值（如颜色、圆角）放:root并加语义前缀，组件专属值须限作用域；禁用!important；依赖继承而非穿透查找；统一入口加载避免覆盖；调试用DevTools跳转而非全局搜索。
直接在 :root 里塞一堆变量，项目越往后越难改、越难查、越容易被覆盖——这不是设计系统，是变量坟场。
如何定义 :root 变量才不被团队误用
变量不是越多越好，关键是谁能改、谁该读、改了影响多大。基础色、圆角、阴影强度这些跨组件复用的值，才进 :root；但 --button-padding、--card-header-font-size 这类带组件语义的，必须收进组件作用域。
- 命名强制加前缀：
--color-primary✅，--primary❌（太裸，易冲突） - 禁止用
!important覆盖变量值——它会切断变量链，DevTools 点击变量名跳转时直接失灵 - Vite 或 Webpack 项目里，如果用了 PostCSS 插件提前提取变量，再用 JS 动态调
document.documentElement.style.setProperty，大概率后者被前者覆盖，建议统一走 CSSOM 操作
var(--x) 在嵌套结构里突然失效，真不是语法问题
CSS 变量靠继承，不是静态替换。父元素没声明，子元素 var(--x) 就回退到 unset 或浏览器默认值，不会向上穿透找祖宗。
- 伪元素如
::before能读宿主元素变量，但content: "icon-" var(--name)是非法的——var()不能拼接字符串 - 想显式继承？加
inherit：比如color: var(--text-color, inherit)，但注意只有颜色、字体类属性默认可继承，background、border不行 - 调试时别全局搜
--xxx，Chrome DevTools 里点 Styles 面板中的变量名旁箭头，直接跳转定义处，快且准
拆成 _colors.css、_spacing.css 后，为什么变量总报“未定义”
构建工具不认 CSS 里的 @import 语义，尤其当它和 JS 的 import './_colors.css' 混用时，:root 会被重复注入，后加载的覆盖先加载的，顺序一错全崩。
立即学习“前端免费学习笔记（深入）”；
- 最稳方案：所有变量集中在一个
variables.css，用<link rel="stylesheet">在 HTML<head>里同步加载；其他 CSS 文件只用var()，不带任何@import - 若用 CSS-in-JS（如 Emotion），变量必须通过
injectGlobal或主题对象传入，它不会自动读外部 CSS 文件里的:root - Webpack/Vite 中若坚持用
@import，必须配postcss-import，且确保它在cssnano之前执行，否则变量名可能被压缩掉
真正难的不是定义变量，而是守住边界：哪些该全局、哪些该组件内聚、哪些该由 JS 控制。一旦 --button-bg-color 和 --button-hover-bg-color 分开定义，就等于埋下未来重构时不敢动的雷。
