BEM 不能直接解决 CSS 变量命名冲突，但通过命名空间前缀（如 --user-card-bg）加作用域限定（在 .user-card 中声明），可有效隔离变量作用域；关键在于变量名含 Block 上下文且声明位置正确。
BEM 不能直接解决 CSS 变量命名冲突，但配合命名空间前缀 + 作用域限定，能有效隔离变量作用域——关键不是“用不用 BEM”，而是变量名是否带 Block 上下文、是否在正确节点上声明。
为什么 --color 这种变量名一引入就炸
CSS 自定义属性（--*）和类名一样，是全局作用域。你写 --color: red，它就在整个文档里生效；第三方库、框架、甚至同事写的 header.css 里也定义了 --color，谁后加载谁赢，且 DevTools 里根本看不出来源。
- 常见错误现象：
button组件设了--bg: #007bff，结果页面所有div都变蓝了，因为某个全局:root { --bg: blue }覆盖了它 - 更隐蔽的问题：Vue 组件中
<style scoped>对--*完全无效，变量照样泄露到全局 - 构建工具（如 Vite）默认不处理 CSS 变量作用域，
postcss-custom-properties只做值替换，不加命名空间
--button-bg 和 --user-card-bg 哪个更安全
必须选后者。--button-bg 看似合理，但一旦项目里出现 modal-button、form-button、ant-btn，它们都可能想用 --button-bg，冲突概率极高；而 --user-card-bg 把 Block 名（user-card）直接编码进变量名，天然绑定语义边界。
- 变量名必须含 Block 上下文：
--user-card-bg✅，--bg❌，--button-bg⚠️（除非全站只有一种 button） - 禁止用泛化词作前缀：
--primary-color不如--header-primary-color或--app-primary-color - 修饰符变量要和类名 Modifier 对齐：
user-card--compact对应--user-card-compacted-padding，而非--compact-padding - 别把 JS 状态塞进变量名：
--is-loading是反模式，状态该由user-card--loading类控制，变量只管样式值
怎么让 --user-card-bg 只在 .user-card 内生效
靠声明位置，不是靠名字。CSS 变量的作用域取决于它在哪声明：:root 下是全局，.user-card 下就是局部。BEM 的 Block 节点（.user-card）正是最自然的变量作用域锚点。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：在
.user-card规则里声明变量，而不是扔在:root或单独文件顶部 .user-card { --user-card-bg: #f8f9fa; --user-card-border-radius: 8px; } .user-card__avatar { background-color: var(--user-card-bg); border-radius: var(--user-card-border-radius); }- 避免在
:root声明业务变量：:root { --user-card-bg: ... }→ 仍会污染全局，失去隔离意义 - 如果要用主题切换，把变量放在
.user-card--dark里覆盖：.user-card--dark { --user-card-bg: #343a40; }
和 CSS Modules 混用时变量怎么写才不翻车
CSS Modules 生成哈希类名（如 userCard_header__abc123），但变量名不会自动哈希。若你在 UserCard.module.css 里写 --bg，它还是全局的。
- 必须手动加 Block 前缀：
--user-card-bg，哪怕文件已是模块化 - 不要依赖构建工具自动加前缀（如
postcss-prefix-vars），它容易把--color错改成--myapp-color，破坏设计系统一致性 - 若用 Tailwind，变量可配合
theme()函数：background-color: theme('colors.user-card.bg')，但前提是配置里已按 Block 分组 - 最稳妥的做法：变量只在组件根元素声明，JS 中用
element.style.setProperty('--user-card-bg', value)动态注入，确保作用域紧贴 DOM 节点
真正容易被忽略的是：变量名带 Block 前缀只是第一步，声明位置错了，再规范的名字也白搭。很多团队写了 --card-title-color 却扔在 :root，等于挂了个“用户卡片专用”的牌子，却把东西堆在公共仓库里。
