局部变量实现组件样式真正隔离，仅作用于当前选择器范围，随组件编译、移除，不污染全局；而全局变量（如:root定义）会导致耦合，破坏模块边界。
局部变量让组件样式真正“隔离”
全局变量（比如定义在 :root 里的 --primary-color）一旦被改，所有用到它的组件都会跟着变——这不是灵活，是耦合。而局部变量只作用于当前选择器范围，比如 .card { --card-padding: 1rem; }，它只影响这个类下的元素，不影响 .button 或 .modal。组件删了，变量自然失效；组件复用时，自带一套可覆盖的默认值，不依赖外部上下文。
var(--x) 查找优先级决定组件可控性
CSS 变量按层叠规则继承和覆盖，var() 总是取离使用点最近的有效声明。这意味着：
- 组件内部定义的
--gap会自动覆盖:root中同名变量 - 父组件传入的
style="--card-bg: #f0f0f0"能直接被子元素继承并使用 - 不需要 JS 注入、也不用担心命名冲突，纯 CSS 就能完成“配置透传”
而全局变量做不到这点：你无法在不污染其他组件的前提下，单独调大某个 .alert 的 --padding。
局部变量天然适配 CSS Modules 和 scoped 样式
现代构建工具（如 Webpack + CSS Modules）或框架（Vue 的 <style scoped>）会给类名加哈希后缀或属性选择器，但它们对 :root 无感——:root { --x: red } 仍会全局生效，破坏模块边界。而局部变量写在组件选择器内，比如：
立即学习“前端免费学习笔记（深入）”；
.MyButton[data-v-abc123] {
--button-height: 40px;
height: var(--button-height);
}
它随组件一起被编译、一起被移除，不会残留、不会泄漏，也不会因多个组件同时定义 --size 而打架。
容易踩的坑：别在局部作用域里重复定义全局概念
局部变量不是万能解药。常见错误包括：
- 在每个组件里都重定义
--spacing-sm、--color-text—— 这等于放弃一致性，回归“每个组件自己管自己”的混乱 - 把本该由设计系统统一维护的语义变量（如
--global--spacing--sm）降级为局部变量，导致主题切换失效 - 误以为局部变量能“继承”父级未声明的变量：如果父元素没设
--icon-size，子元素var(--icon-size)会 fallback 到继承值或初始值，不是报错，但结果不可控
真正健壮的组件化主题系统，是全局变量提供基础语义约束，局部变量负责组件内微调——两者不是替代关系，而是分层协作。忽略这一层分工，局部变量就只是把全局污染换成了局部失控。
