直接写 .btn--disabled 更可靠，因框架不总在 DOM 写 disabled 属性，BEM 修饰符显式可控、SSR 友好、语义清晰、命名与状态一致、支持组合、避免嵌套和耦合、适配现代工具链且防构建误删。
为什么直接写 .btn--disabled 比 .btn[disabled] 更可靠
因为原生属性选择器（如 [disabled]）在 React/Vue 等框架中常失效——它们不直接操作 DOM 属性，而是用 disabled 作为 props 控制组件行为，真实 DOM 上可能根本没有 disabled 属性。BEM 修饰符是显式、可控的状态标记，不依赖运行时 DOM 反射。
-
.btn--loading和.btn--success是你主动加的 class，和 JS 状态同步更稳 - 避免样式被
[disabled] { opacity: 0.5; }这类全局规则意外覆盖 - SSR 场景下，服务端渲染时也能准确输出对应修饰符，不用等 JS 挂载才生效
修饰符命名要反映「状态语义」，不是「视觉效果」
写成 .card--gray 或 .input--big 是危险信号：一旦设计改了灰色变蓝、尺寸变小，类名就彻底失语；而 .card--archived、.input--compact 描述的是它“是什么”，不是“看起来怎样”。
- 状态类名应和组件内部 state 字段或 props key 保持一致，比如
status="error"→.form--error - 布尔状态优先用
--is-前缀（如.modal--is-open），避免歧义 - 禁止用
--hover、--focus这类伪类替代品——这些该由 CSS 伪类控制，不是 BEM 修饰符的职责
多个修饰符共存时，顺序和组合方式影响可维护性
一个按钮同时是禁用态和加载中：.btn--disabled.btn--loading 可以，但 .btn--disabled-loading 不推荐——状态组合爆炸后无法穷举，且难以动态拼接。
- 每个修饰符独立声明，JS 中用
clsx或模板字符串安全拼接：`${base} ${isDisabled ? 'btn--disabled' : ''} ${isLoading ? 'btn--loading' : ''}` - CSS 中用独立规则覆盖，别写
.btn--disabled.btn--loading { ... }这种耦合选择器 - 避免修饰符嵌套逻辑，例如
.btn--primary--disabled—— BEM 不支持双修饰符语法，也违背单一职责
和 CSS-in-JS 或 Tailwind 混用时，修饰符容易变成“隐藏状态”
当用 styled-components 动态插值或 Tailwind 的 class="bg-blue-500 disabled:opacity-40" 时，BEM 修饰符可能被绕过，导致样式逻辑分散在 JS、HTML、CSS 三处。
立即学习“前端免费学习笔记（深入）”；
- 如果项目已用 Tailwind，
--disabled修饰符最好只用于触发 JS 行为（如阻止点击），视觉交给disabled:变体 - 在 styled-components 中，仍建议保留 BEM 类名作 data hook（如
data-testid="btn--submit"），方便 E2E 测试定位状态 - 最易忽略的一点：构建工具（如 PostCSS）若启用了
discardUnused，未出现在 HTML 中的修饰符类（如.btn--pending）可能被误删——务必确保所有修饰符都在代码中显式引用
