应使用 btn is-loading 表达按钮加载状态，其中 is-loading 是语义清晰、块级归属的状态修饰符，需与块名组合使用、限定作用域、避免泛匹配，并遵循声明式设计原则。
怎么用BEM修饰符表达“按钮正在加载”这种状态
直接加 is-loading 修饰符，不是加 loading 或 btn--loading。BEM要求修饰符名语义清晰、可读性强，且必须和块名形成逻辑归属——btn__icon 可以有 is-hidden，但 btn 块本身的状态就得挂载在块级上：btn is-loading。
常见错误是把状态写成独立类名（比如 loading-state），导致样式无法复用、JS判断时需额外维护映射关系；也有人误用元素层级写状态，如 btn__text--loading，结果点击区域只剩文字响应，交互断裂。
-
is-前缀是约定，不是可选项：它明确区分“状态”和“主题/尺寸”等静态修饰符（如btn--small） - 多个状态可共存：
btn is-loading is-disabled，但要确保 CSS 中is-disabled的权重不意外覆盖is-loading的视觉反馈 - JS 切换状态时，推荐用
classList.toggle('is-loading')而非字符串拼接，避免重复添加或遗漏移除
CSS里怎么写.is-loading才不污染其他组件
关键在作用域隔离：所有状态样式必须基于块选择器限定，不能写全局 .is-loading。否则一个 modal is-loading 可能意外触发 btn is-loading 的动画逻辑。
正确写法是只在块上下文中生效，例如：
btn.is-loading {
pointer-events: none;
}
btn.is-loading::after {
content: '…';
}
性能上要注意：避免在 is- 修饰符里写高成本属性（如 box-shadow 多层叠加、filter: blur()），尤其在频繁切换的状态（如 hover + loading 组合）下容易掉帧。
- 禁止出现
[class*="is-"]这类泛匹配，它会命中所有含is-的类，包括你没打算管的第三方组件 - 如果项目用 CSS-in-JS 或 Shadow DOM，
is-修饰符仍应保留在 class 名中，只是最终生成的选择器由工具自动加前缀 - 不要为每个状态单独抽离文件（如
btn.states.css），BEM 状态样式就该和块的主样式写在一起，方便定位和审查
当UI状态需要组合（比如“禁用+错误+加载”）怎么办
BEM 不反对多个 is- 共存，但得接受它们之间没有预设优先级。CSS 层叠顺序决定最终表现，不是命名顺序。
典型陷阱是以为 btn is-disabled is-error is-loading 会按从左到右生效，实际上如果 is-error 的样式写在后面且包含 background，它就会盖掉 is-loading 的背景动画。
- 把最基础、最常驻的状态（如
is-disabled）样式写在前面，动态高频状态（如is-loading）写在后面 - 避免用
!important解决冲突——它会让后续任何覆盖都变困难，尤其是当设计改稿要求“禁用态也要显示加载转圈”时 - 真遇到三重状态难兼顾，宁可新增一个组合修饰符：
btn is-disabled--loading（注意这里是双横线，表示它是is-disabled的变体），而不是堆砌三个is-
为什么用is-loading而不是js-loading这类运行时标记
因为 is- 是声明式状态，描述“当前看起来是什么样”，而 js- 是行为式标记，描述“这里绑了JS逻辑”。混用会导致语义错位：一个按钮可能被 JS 设置了 js-loading，但样式还没加载进来，页面就裸奔出未定义状态。
更实际的问题是 SSR 和 hydrate 场景：服务端渲染时没法执行 JS，但可以准确输出 btn is-loading；客户端接管后只需同步状态，不用重新 patch class。
-
js-类名只用于 JS 获取元素（如document.querySelector('.js-modal-toggle')），绝不参与样式定义 - 如果你发现必须靠
js-loading才能触发样式，说明 CSS 没覆盖到初始状态，或者 JS 在 class 添加前就读取了元素尺寸 - React/Vue 项目里，
is-修饰符应该来自 props 或 computed，不是 ref.current.classList.add() —— 后者绕过了框架的更新机制，容易漏更新
BEM 修饰符不是语法糖，它是把“状态即样式”这件事显性化。最难的部分从来不是怎么写 is-，而是团队是否真的在每次加 class 时，停下来问一句：这个状态，是 UI 当前的样子，还是我刚给它塞了个钩子？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
