CSS变量防冲突需同时满足两点：变量名含Block上下文（如--user-card-bg），且必须在对应选择器（如.user-card）内声明，才能实现局部作用域。
因为 CSS 变量（--*）天生是全局作用域，BEM 类名再隔离也管不住它——--color 在 :root 里声明一次，全页面所有组件都认这个名，谁后加载谁覆盖。
为什么 --bg 一写就炸，而 .user-card__bg 不会
CSS 类名靠 BEM 的 block__element 结构天然隔离，但变量不是。浏览器解析 var(--bg) 时，只往上找最近的生效声明，不管它写在哪个文件、哪个组件里。
-
.user-card__bg是选择器，匹配的是 DOM 上带这个类的元素，.profile-card__bg完全是另一个选择器，互不干扰 -
--bg是自定义属性，没有“属于谁”的概念；你在:root设--bg: red，又在.button里设--bg: blue，只要后者生效位置更靠后，所有用var(--bg)的地方都会变蓝 -
Vue的<style scoped>对--*完全无效，变量照样泄露到全局
--user-card-bg 和 --button-bg 哪个真能防冲突
必须选 --user-card-bg。前缀不是为了“看起来长”，而是把 Block 语义硬编码进变量名，让不同模块的变量名天然不重叠。
-
--button-bg看似合理，但项目里很快会出现modal-button、form-button、ant-btn，它们都想用同一个变量名，冲突概率极高 -
--user-card-bg把归属（user-card）和用途（bg）锁死，哪怕另一个模块也叫card，只要 Block 名不同（如product-card），变量名就不可能撞 - 禁止用泛化词作前缀：
--primary-color❌，应为--header-primary-color或--app-primary-color
怎么让 --user-card-bg 真正在 .user-card 内生效
靠声明位置，不是靠名字。CSS 变量的作用域由它在哪声明决定：:root 下是全局，.user-card 规则块内声明就是局部作用域。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：在
:root或全局variables.css里写--user-card-bg: #f8f9fa - ✅ 正确：在
.user-card规则里声明：.user-card { --user-card-bg: #f8f9fa; } - 这样，
var(--user-card-bg)在.user-card__avatar里取值，只会拿到.user-card节点上声明的那个，不会被其他模块的同名变量干扰 - BEM 的 Block 节点（
.user-card）正是最自然的变量作用域锚点——别绕开它去建单独的变量文件
最容易被忽略的一点：变量名带 Block 上下文只是第一步，真正起效的关键是把它声明在对应 Block 的 CSS 规则内部。否则名字再规范，也还是全局污染源。
