直接用.btn--disabled、.btn--loading等BEM修饰符最可控，因--是唯一合法状态分隔符，确保语义清晰、工具链识别、避免误删；禁用属性选择器和伪类替代，JS用classList.toggle()安全切换，CSS需独立声明、避免组合选择器与性能陷阱。
直接用 btn--disabled、btn--loading 这类双连字符修饰符，配合 JS 显式增删 class，是最可控的状态管理方式；别依赖 [disabled] 属性选择器或伪类，也别把状态逻辑塞进变量名或字符串拼接里。
为什么必须用 -- 而不是 - 或 _
BEM 规范中，-- 是修饰符的唯一合法分隔符，它明确告诉团队和工具：“这是块的临时状态”，而不是新块或元素。写成 btn-disabled 或 btn_disabled 会让 CSS 选择器失去语义层级，DevTools 里看不出它是按钮的状态还是另一个组件。构建工具（如 PurgeCSS）也可能把它当成未使用类误删——因为没匹配到 btn--* 的模式。
-
btn--disabled✅ 正确：BEM 解析为「btn 块的 disabled 状态」 -
btn-disabled❌ 错误：被识别为独立块名，破坏可维护性 -
btn_disabled❌ 错误：下划线在 BEM 中无约定含义，无法被自动化工具识别
JS 切换状态时，classList.toggle() 比字符串拼接更稳
常见错误是手动拼 el.className = 'btn btn--primary' + (isDisabled ? ' btn--disabled' : '')，容易漏空格、覆盖其他类，或在 SSR/ hydration 不一致时出错。用 classList API 能保证原子性，且浏览器原生支持。
- 推荐：
el.classList.toggle('btn--disabled', isDisabled) - 避免：
el.className += ' btn--disabled'（重复添加、无法移除） - React/Vue 中，确保 state 变化后真实触发了 class 更新，不只是改了
isDisabled变量却忘了映射到 class 列表
CSS 中怎么写才不污染、不冲突、不掉帧
所有状态样式必须绑定到块选择器上，比如 btn.is-loading 或 btn.btn--loading，禁止写全局 .is-loading 或泛匹配 [class*="is-"]。多个状态共存（如 btn--disabled btn--loading）时，每个修饰符应只负责自己那部分视觉/行为，不互相覆盖。
立即学习“前端免费学习笔记（深入）”；
- 正确：
btn.btn--disabled { opacity: 0.6; }和btn.btn--loading { cursor: wait; }分开定义 - 危险：
btn.btn--disabled.btn--loading { background: #ccc; }—— 组合爆炸、难维护、漏一个类就失效 - 性能注意：避免在
btn--loading里叠加多层box-shadow或filter: blur()，高频切换时易掉帧
多个状态叠加时，最常被忽略的是 CSS 层叠顺序
写 btn is-disabled is-loading 并不等于“先禁用再加载”，最终样式由 CSS 规则在文件中的书写顺序和选择器权重决定，不是 HTML class 列表顺序。如果 btn--error 的规则写在后面且设置了 background，它就会盖掉 btn--loading 的背景动画。
真正要检查的，是 DevTools Styles 面板里哪条规则生效、为什么生效——而不是假设 class 名字排在前面就优先。
