组件变量必须声明在组件根选择器而非:root，否则导致主题切换失效、JS读取不到值、DevTools显示invalid；全局变量需带模块前缀且禁嵌套，组件内用继承+默认值保障健壮性。
全局 CSS 变量必须统一挂载在 :root，组件变量则应通过选择器局部声明——不是靠文件拆分，而是靠作用域隔离。混用或错放会导致主题切换失效、JS 读取不到值、调试时计算链断裂。
为什么不能把组件变量也塞进 :root
所有变量都写在 :root 看似“统一”，实际埋下三类隐患：
-
--card-padding和--modal-padding都在全局，暗色模式脚本批量重设--padding类变量时会误伤无关模块 - JS 用
getComputedStyle(document.documentElement).getPropertyValue('--card-padding')拿不到值——它只返回:root里定义的原始值，不包含组件内覆盖后的计算结果 - 开发者调试时看到的 DevTools “Computed” 面板里，
var(--card-padding)显示为“invalid property value”，因为该变量根本没在:root声明过
组件变量必须声明在组件根选择器上
局部变量的生命线是“声明位置 + 继承机制”。正确做法是在组件最外层元素的选择器中直接定义：
.card {
--card-padding: 16px;
--card-radius: 8px;
padding: var(--card-padding);
border-radius: var(--card-radius);
}
<p>.card--compact {
--card-padding: 12px;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
- 子元素（如
.card__header）自动继承这些变量，无需重复声明 - 用
var(--card-padding, 16px)提供默认值，避免未声明时样式崩塌 - 不要用
@layer或:where()包裹变量声明——它们不改变变量作用域，只是控制层叠顺序
全局变量命名必须带模块前缀，且禁止嵌套引用
:root 里的变量不是“随便起名”，而是设计系统的数据契约：
- 用
--theme-color-primary而非--primary：避免团队协作中--primary被按钮、图标、状态条各自重复定义 - 禁用
--theme-primary: var(--color-primary)这类嵌套：CSS 变量不支持运行时解析嵌套引用，JS 无法读取，DevTools 里显示为空白 - 原子化取值：定义
--spacing-unit: 4px，再用--spacing-md: calc(var(--spacing-unit) * 3)推导，而非直接写死--spacing-md: 12px——换倍率时只需改一个源头
Sass 中变量文件拆分要配合 @use 隔离
文件物理拆分不等于逻辑隔离。若仍用 @import，_colors.scss 里的 $primary 会污染 _spacing.scss 的同名变量：
- 每个模块变量单独成文件：
_colors.scss、_spacing.scss、_typography.scss - 主入口用
@use 'colors' as c显式引入，调用时写c.$primary，杜绝命名冲突 - 配置文件禁止含任何选择器或样式规则——它只提供数据，不参与渲染
真正难的是保持“全局变量只承载设计意图，组件变量只响应局部行为”这条边界。一旦让 :root 承担组件态（比如 --is-mobile），或者在组件里重写全局语义变量（比如 .button { --theme-color-primary: red }），整套系统就失去可预测性。
