css变量失效主因是作用域错位或加载顺序错误：:root定义需在组件css之后，且web components必须用:host{--var:inherit}显式承接，普通组件则依赖父容器声明变量。
直接在组件里写 --color-primary 会失控，不是变量不好用，而是没分层——所有基础 Token 必须定义在 :root 并带语义前缀，组件只引用、不声明、不覆盖。
为什么 :root { --primary-color: red; } 总是不生效
根本原因就两个：变量加载顺序错位，或组件压根没读 :root。多数 UI 库（包括 antd、Lucid、xstyled 封装组件）实际监听的是组件父容器上的变量，比如 .dashboard-page { --primary-color: #52c418; }，只要按钮被这个元素包裹，且内部用 var(--primary-color)，立刻生效。
常见错误现象：
-
:root样式表引入顺序在组件库 CSS 之前，浏览器按顺序解析，后定义的同名变量才生效 - Web Components 的 Shadow DOM 默认不继承
:root变量，必须加:host { --primary-color: inherit; } - 第三方组件（如 codexUI）把变量挂到了自己的宿主元素（如
my-button）上，而非全局:root
如何安全地在组件内读取外部传入的变量
别指望变量自动透传到深层嵌套或 Shadow DOM。必须显式承接：
- 对 Web Components：
:host { --primary-color: inherit; }—— 缺少inherit就等于关死了门 - 对普通 HTML 组件（如
<div class="card"><slot></slot></div>）：.card { --card-bg: #fff; }，再给<slot></slot>外层加style="all: inherit" - 绝对不要在组件内部重复声明同名变量，比如
.button { --primary-color: #1890ff; }—— 这会屏蔽外部值，变成硬编码 - 回退值必须是静态色：
color: var(--text-color, #333)安全；color: var(--text-color, var(--fallback))在 Safari 15.6 以下直接失效
怎样设计可维护的 Token 命名与分层体系
Token 不是颜色别名，是按语义 + 用途分层的契约。命名混乱会导致主题切换漏改、误改。
- 基础色用
--color-primary-base（如#2563eb），不直接用于组件，只供衍生色计算 - 语义色用
--color-primary-500（主按钮默认色），由 base 色通过color-mix()或预设比例生成 - 空间尺寸用
--space-md（如12px），避免用--padding-sm这类绑定具体用途的名——同一数值可能用于margin/padding/gap - 禁止出现
--btn-bg-hover这种强组件绑定名——它应由--color-primary-600+--state-hover组合推导 - 所有基础 Token（颜色、圆角、阴影、断点）只定义在
:root，且命名带语义前缀；组件内部只用var(--color-bg-surface)引用
字号和响应式缩放怎么真正“适配”而不是“硬套”
直接全局设 --font-size-sm: 0.75rem 看似省事，但 Card 标题用它太小，Badge 用它又撑不开。关键不是调数值，而是定义相对关系。
- 建立两级字号系统：基础 Token（
--font-size-100、--font-size-200）对应绝对值；组件 Token（--text-body-font-size、--text-caption-font-size）用var(--font-size-100)引用，便于统一缩放 - 在组件根元素上通过
font-size缩放整个子树，比如.badge { font-size: var(--font-size-100); }，其内部<span></span>就可用em或rem得到响应式缩放 - 避免在媒体查询里重复写
--font-size-sm，改用@media (min-width: 768px) { :root { --font-size-scale: 1.1; } }，再让组件用calc(var(--font-size-100) * var(--font-size-scale))
最常被忽略的点是：变量声明位置决定作用域边界，:root 是全局起点，但不是唯一入口；真正可控的覆盖点，永远在组件父容器上——那里才是样式决策权该落下的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
