BEM本身不管理CSS全局变量，但用BEM思维设计变量名（如--ui-button__text--primary-color）并在Block根节点声明，才能真正隔离作用域、避免冲突、支持主题切换。
直接说结论：BEM 本身不管理 CSS 全局变量，但用 BEM 思维设计变量名 + 在 BEM Block 节点上声明，才能真正隔离作用域、避免冲突、支持主题切换。
为什么 --color 或 --button-bg 一用就炸
CSS 自定义属性是全局作用域，--color 这种裸名就像在办公室大喊“小王”，没人知道叫的是谁；--button-bg 看似合理，但项目里一旦出现 ant-btn、form-button、modal__confirm-btn，它们都可能想用这个变量，加载顺序一变就覆盖失效。
常见错误现象：
- DevTools 里搜
--bg，结果弹出 17 个来源，全标着common.css或index.css，根本看不出是谁定义的 - Vue 组件加了
<style scoped></style>，但--card-padding依然泄露到全局，被其他组件意外读取 - 构建后 CSS 压缩把
--user-card-bg和--video-card-bg都缩成--a和--b，变量值彻底错乱
--ui-button__text--primary-color 这种长名不是为了炫技
它本质是把 BEM 的三层语义（Block–Element–Modifier）平移进变量名，确保变量只服务于特定上下文：
立即学习“前端免费学习笔记（深入）”；
-
--ui-是命名空间前缀，标明来自 UI 组件库，和--video-、--be-隔离 -
button__text对应 DOM 中的.ui-button__text元素，不是泛指“按钮里的文字”，而是特指这个块下的文本子元素 -
--primary-color表示该文本在 primary 状态下的颜色值，和--secondary-color正交可叠加
如果省略 __text 段，写成 --ui-button--primary-color，那 .ui-button__icon 和 .ui-button__text 就会共用同一变量，改一个值，图标和文字颜色全跟着变。
变量声明位置比名字更重要
再规范的变量名，声明在错误位置也等于白搭。CSS 变量的作用域由声明节点决定，不是由名字决定：
- 写在
:root下 → 全局生效，适合基础设计令牌（如--color-text-primary） - 写在
.ui-button规则内 → 仅当元素有.ui-button类时才注入，.ui-button--large也能继承 - 写在
.ui-button--disabled规则里 → 危险！该修饰符可能被 PurgeCSS 删除，或因类未加载导致变量缺失
正确做法是：在 Block 根节点上声明组件级变量，例如：
.ui-button {
--ui-button__text--color: var(--color-text-primary);
--ui-button__padding: var(--space-unit-md);
}
这样既保证作用域收敛，又允许上层通过 html[data-theme="dark"] .ui-button 覆盖变量，暗色模式才真正可控。
容易被忽略的细节：变量和类名必须协同，不能各干各的
BEM 类名管“归属与状态”，CSS 变量管“数值与主题”，二者脱节就会出问题：
- 禁止用变量替代状态类：
--is-disabled是反模式；该用.ui-button--disabled控制开关，变量只提供--ui-button-opacity-disabled这样的值 - 禁止在 HTML 中硬写
style="--ui-button-size: lg"；所有变量应由 JS 或构建时统一注入，保证可追溯 - 服务端渲染时，
data-theme属性和对应变量定义必须同步输出，否则首屏闪回亮色
最常漏掉的一点：所有变量必须带 fallback，比如 color: var(--ui-button__text--color, #007bff) —— 不是为兼容老浏览器，而是防 JS 加载失败、SSR 数据缺失、或 PurgeCSS 误删后的兜底。
