按钮加载状态应加在BEM根元素上，使用修饰符button--loading；避免新增子元素或块级元素，所有样式和动画通过该修饰符控制，并兼顾可访问性与性能。
按钮加载状态该加在哪个BEM元素上
加载状态属于按钮的临时视觉变体，不是独立组件，所以不能新建一个 button__loading 块级元素。正确做法是用修饰符（modifier）标记按钮当前处于加载中，即 button--loading。这样既保持 BEM 的语义一致性，又避免 DOM 层级膨胀。
常见错误是把 loading 动画做成子元素，比如：<button class="button"><span class="button__loader"></span>提交</button>——这会让动画脱离按钮尺寸上下文，且无法响应按钮禁用态（button:disabled 会禁用子元素交互，但不会自动隐藏或停掉 button__loader 的动画）。
- 修饰符应直接作用于根元素：
<button class="button button--loading">提交</button> - 所有加载相关样式（如文字隐藏、内边距调整、背景旋转图标）都通过
.button--loading控制 - 避免在 JS 中动态增删
button__loader元素，改用 CSS 切换修饰符类名
Element Plus 的 el-button + loading 属性如何映射到 BEM 类名
Element Plus 的 el-button 在 loading 为 true 时，会自动添加 is-loading 类，并插入一个内联 svg 加载图标。它不遵循 BEM 命名，但你可以覆盖其行为，使其输出符合 BEM 的类结构。
关键点在于：不要直接依赖 Element 内置的 is-loading，而是用自定义 class 覆盖，并确保你的 BEM 修饰符优先级更高：
立即学习“前端免费学习笔记（深入）”；
- 在 scoped style 中写：
.button.button--loading .button__content { visibility: hidden; } - 用
:class绑定修饰符：<el-button :class="{ 'button--loading': isLoading }" @click="submit">提交</el-button> - 如果需复用 Element 的 loading 图标，可提取其 SVG 路径，放入
.button--loading::after伪元素，避免污染 DOM 结构
button--loading 下的动画性能与可访问性注意点
纯 CSS 动画（如 border: .15em solid transparent + border-top-color 旋转）比 JS 驱动的帧动画更轻量，也更易被屏幕阅读器忽略。但要注意两点：
- 动画必须用
prefers-reduced-motion降级：@media (prefers-reduced-motion: reduce) { .button--loading::after { animation: none; border: none; content: "…"; }} - 加载中按钮必须设
aria-busy="true"和aria-disabled="true"（即使未显式加disabled属性），否则键盘用户可能重复触发 - 避免使用
opacity: 0隐藏文字——它仍占据可访问树；改用visibility: hidden或position: absolute; clip-path: inset(100%)
多个加载态（如“提交中”“重试中”）是否需要不同修饰符
不需要拆成 button--submitting、button--retrying。BEM 修饰符应描述「状态」而非「动作来源」。统一用 button--loading，文案和图标由 JS 控制即可。
真正要区分的是「不可逆加载」和「可中断加载」：前者（如表单提交）应禁用按钮并锁定状态；后者（如搜索建议加载）允许用户输入新关键词并取消前序请求。这种逻辑差异在 JS 层处理，CSS 层保持修饰符单一。
容易被忽略的是：当 loading 状态结束但操作失败时，按钮需从 button--loading 切换到 button--error，而不是直接回退到默认态——否则用户看不到反馈。这个切换时机必须在 Promise catch 后明确控制类名更新。
