CSS变量不能替代BEM修饰符，因前者仅管理样式值，后者承载语义状态；如button--disabled可被JS、无障碍工具及伪类直接感知，而--button-variant无法实现此功能。
CSS 变量不是 BEM 的替代品，两者解决的问题根本不同；强行用变量取代修饰符，只会让状态逻辑失控、调试困难。
为什么 CSS 变量不能替代 BEM 修饰符
变量只管「值」，修饰符管「语义归属与状态开关」。比如 --button-color 可以动态设为 #007bff 或 #6c757d，但它无法表达「这个按钮当前是否被禁用」——button--disabled 才是唯一能被 :not(.button--disabled)、el.classList.toggle('button--disabled') 或无障碍属性 aria-disabled="true" 对齐的信号。
常见错误现象：
- 把
button--primary改成style="--button-variant: primary"，结果 JS 里查不到类名，自动化测试断言失败 - 用
getComputedStyle(btn).getPropertyValue('--button-variant')拿到字符串"primary"，但无法判断它是否生效（可能被父级重定义或拼写错误） - 想写
.button:not([style*="--button-variant"])做兜底样式？CSS 选择器根本不支持匹配style属性里的自定义属性值
什么时候该用变量 + 什么时候必须保留修饰符
判断标准就一条：这个变化是否需要被 JS、可访问性工具、伪类逻辑或条件样式（如 :not()）直接感知。
立即学习“前端免费学习笔记（深入）”；
- ✅ 适合变量：
--button-padding、--card-radius、--text-line-height—— 它们只是数值，改一处全链路响应，且不改变组件行为 - ❌ 必须用修饰符：
button--disabled、button--loading、button--success—— 这些要触发pointer-events: none、aria-busy="true"、或配合.button:not(.button--disabled):hover实现交互约束 - ⚠️ 混合使用才合理：
.button { background-color: var(--button-bg); }+.button--disabled { opacity: 0.5; }，变量负责外观，修饰符负责状态约束
BEM 修饰符和 CSS 变量共存的关键边界
共存不是随便混搭，而是有严格分工：
- 变量必须带命名空间前缀：
--button-bg，不能写--bg；否则.input和.button都改--bg，语义就坍塌了 - 变量声明位置必须在组件根节点：
.button { --button-bg: var(--primary); }，而不是塞进:root或全局.theme-dark里——否则深色模式下.button--loading的背景色可能没跟着变 - 禁止在 HTML 中硬编码 style：
<button style="--button-bg: red"></button>是反模式；变量值应由 JS 调用el.style.setProperty('--button-bg', color)注入，或构建时预设，确保可追溯 - 修饰符类名不能带变量语义：
button--color-red是错的，应拆成button--primary（BEM 修饰符）+ 主题层控制--button-bg（变量）
调试时最常忽略的一点
当你发现某个修饰符样式没生效，别急着查 CSS 文件——先看 getComputedStyle(el).getPropertyValue('--button-bg') 返回什么，再检查该变量是否真在 .button 元素上被声明（而非父容器），最后确认修饰符类名是否真的存在于 el.classList。三者缺一不可，而多数人只盯最后一个。
