直接写.btn--disabled更可靠，因BEM修饰符用--前缀将状态锁死在组件内，避免外部样式覆盖、DOM层级依赖及语义混淆，且需绑定具体UI表现、独立存在、统一命名规范。
为什么直接写 .btn--disabled 比 .btn.disabled 更可靠
因为 BEM 修饰符用 -- 前缀把状态锁死在组件内部，不依赖 DOM 层级、不被父级样式意外覆盖。比如你写了个 .form--compact .btn { opacity: 0.6; }，它会和 JS 动态加的 .disabled 类产生视觉冲突；而 .btn--disabled 是独立命名，CSS 权重一致，也不靠结构关系生效。
常见错误是把修饰符当布尔开关乱加：.btn--primary--disabled 这种连写语义模糊、无法维护。BEM 要求每个修饰符只表达一个状态维度——.btn--primary 和 .btn--disabled 应该分开存在、自由组合。
JS 添加类名时，必须用 element.classList.toggle('btn--disabled', isDisabled)，而不是拼字符串赋值给 className——后者容易覆盖其他类、漏空格、难调试。
多个状态共存时，.btn--primary.btn--loading 怎么写才不冲突
BEM 允许多修饰符共存，但前提是它们语义正交、CSS 规则互不覆盖。比如 .btn--primary 控制背景色，.btn--loading 控制光标和图标旋转，两者应分别定义，而不是写成组合选择器 .btn--primary.btn--loading { ... }——这种写法权重高、漏一个类就失效、难以扩展。
立即学习“前端免费学习笔记（深入）”；
需要叠加效果（如 loading + disabled 同时出现）时，CSS 中要显式处理：.btn--disabled.btn--loading { opacity: 0.6; }，不能指望自动继承。
禁止嵌套修饰符写法：.btn--primary-loading 是非法的，它不再是修饰符，而是一个新块名，破坏了 BEM 的可预测性。
React/Vue 中怎么避免 className="btn btn--primary btn--disabled" 变成模板噪音
硬写一长串 class 名确实难看，但盲目上 clsx 或 classnames 也不解决问题——容易把状态逻辑塞进模板，导致样式和组件逻辑耦合。
更稳的做法是把修饰符生成逻辑收口到组件内部，用对象映射控制输出：
const modifiers = {
'btn--primary': variant === 'primary',
'btn--disabled': isDisabled,
'btn--loading': isLoading,
};
const className = ['btn', ...Object.entries(modifiers)
.filter(([, active]) => active)
.map(([cls]) => cls)].join(' ');
这样既保持语义清晰，又避免空格遗漏、类型失控；比字符串拼接 `btn btn--${variant}` 更安全，也比通配选择器 [class*="--"] 更可控。
为什么 .button--disabled 有时点了没反应
根本不是 BEM 失效，而是 class 没真实出现在元素上。浏览器只认 DOM 中存在的类名，不认 JS 变量里存的字符串。
检查点有三个：
- 打开 DevTools Elements 面板，确认 button 元素的
class属性是否真的包含button--disabled（不是button-disabled或button_disabled） - 确认 JS 调用了
element.classList.add('button--disabled')，而不是拼字符串后赋值给className - React/Vue 中，确保 state 更新后确实触发了
className重渲染，不是只改了isDisabled却忘了映射到 class 列表
构建工具如 PurgeCSS 可能误删动态类名，需在 safelist 中显式保留 /button--(disabled|loading|error)/。
