css变量无局部作用域，:root声明全局生效且后加载者覆盖前者的值；解决冲突的关键是通过唯一类名前缀限定声明位置，并在对应选择器内定义带语义边界的变量名。
CSS变量没有局部作用域，--color-primary这种命名一写进:root就全局生效，多个组件库或团队成员同时定义同名变量，谁后加载谁赢——这不是bug，是设计使然。要解决冲突，核心不是“阻止覆盖”，而是“控制覆盖范围”。
为什么:root声明必然导致冲突
:root下定义的变量天然继承到整个文档树，浏览器按层叠顺序解析，不区分来源。Ant Design、Element Plus、你自己的vars.css都往:root写--primary-color，最终只保留最后一个生效值。DevTools 的 Styles 面板里甚至看不出哪个文件定义了它，只能靠 Computed 面板反查。
- Vue 单文件组件中
<style scoped></style>对:root声明完全无效，写进去会被忽略 - 构建工具（Vite/Webpack）不会自动隔离 CSS 变量，
postcss-custom-properties只做值替换，不加命名空间 - 哪怕用了 Tailwind 的
prefix: 'tw-'，--tw-bg-opacity这类变量名仍被原样保留，不受影响
用唯一类名前缀限定变量声明位置
变量的作用域由**声明位置**决定，不是变量名。把--button-height写在.mylib-button选择器里，它就只对这个类及其后代生效；写在.mylib-modal里，就互不干扰。
- 每个独立 UI 模块必须带唯一前缀：
.mylib-button、.acme-card、.shop-product-list - 变量声明必须落在该类选择器内：
.mylib-button { --button-height: 32px; }，而不是堆在:root或单独文件顶部 - 组件内使用
var(--button-height)时，浏览器自动向上查找最近的、定义了该变量的祖先元素，自然完成隔离 - 禁止用
!important覆盖变量——它会让后续所有重写失效，破坏可维护性
--user-card-bg比--button-bg更安全
变量名本身要携带语义边界。泛化名如--bg、--color注定冲突；前缀--button-bg看似合理，但项目里出现modal-button、form-button时，它们都可能想复用这个名字。
- 正确做法：变量名含 Block 上下文，如
--user-card-bg、--product-list-spacing - 避免用泛义词作前缀：
--primary-color不如--header-primary-color或--app-primary-color - 修饰符变量需与类名 Modifier 对齐：
user-card--compact对应--user-card-compacted-padding，而非--compact-padding - JS 状态不该塞进变量名：
--is-loading是反模式，状态应由user-card--loading类控制，变量只管样式值
动态设置时子元素没响应？检查继承链
el.style.setProperty('--color', 'red')只影响该元素自身，子元素是否响应，取决于两点：是否用了var(--color)，以及该变量是否在 DOM 树中某一级被定义（比如父容器上设了style="--color: red"）。
- CSS 变量继承的是“计算后的值”，不是声明语句本身。父元素设
--size: 1em且自身font-size: 20px，子元素var(--size)取到的就是20px，不是1em - 用
unset或initial赋值会切断继承链，子元素不再向上找；若需透传，改用--color: inherit - 路由跳转后变量“丢失”，往往是因为异步加载时序错配——变量定义的 CSS 文件还没加载完，组件就开始渲染了
真正难的不是写对一行.mylib-button { --x: y }，而是让整个团队/第三方库都遵守同一套声明位置和命名约定。一旦有人偷偷往:root塞变量，整套隔离逻辑就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
