带状态图标的按钮应遵循bem规范：btn__icon为唯一合法图标元素名，状态由modifier（如btn--loading、btn__icon--loading）表达，且btn--loading作用于按钮整体，btn__icon--loading仅控制图标视觉；svg需用currentcolor和css变量适配状态。
带状态图标的按钮，核心不是“怎么加图标”，而是“图标和状态如何协同表达语义”。BEM里不能靠类名堆砌视觉效果，必须让每个类名明确回答：这是什么（Block）、它里面是什么（Element）、它现在处于什么状态（Modifier）。
btn__icon 是唯一合法的图标元素名
按钮里的图标是按钮功能逻辑的一部分，比如加载中、成功反馈、删除确认——它不是装饰，而是交互状态的视觉载体。因此必须用 btn__icon 表示，而不是 btn__loading-icon 或 btn__success-icon。
常见错误是把状态塞进 Element 名里：btn__icon-loading。这违反 BEM 原则：__ 只表示从属结构，不表达状态。状态必须交给 Modifier。
-
btn__icon描述“按钮里的图标”这个固定组成部分 - 状态变体用
btn__icon--loading、btn__icon--success这类 Modifier 实现 - 所有
btn__icon--*都必须作用于同一个 HTML 元素：<span class="btn__icon btn__icon--loading"></span> - 禁止写成
btn--loading__icon—— Modifier 不能跨级修饰 Element，它只能修饰 Block 或 Element 本身
状态类名必须作用在 btn 上，而非 btn__icon
按钮是否处于 loading 状态，是整个按钮的业务状态，不是图标的私有属性。用户点击后，按钮禁用、文字灰掉、图标旋转——这一整套变化属于 btn 的状态，不是 btn__icon 的。
所以真实 DOM 应该是：<button class="btn btn--loading"><span class="btn__icon"></span><span class="btn__text">提交</span></button>
-
btn--loading控制按钮整体禁用、背景色、指针样式、文字 opacity -
btn__icon--loading只负责图标自身的动画或 SVG 路径切换，不控制按钮行为 - 两者可共存：
class="btn btn--loading"><span class="btn__icon btn__icon--loading"></span> - 如果只加
btn__icon--loading而不加btn--loading，按钮依然可点，语义断裂
SVG 图标要配合 currentColor 和 CSS 变量才能响应状态
btn__icon 内部如果是内联 <svg></svg>，它的 fill 和尺寸极易被父级 font-size 或 color 干扰，导致 loading 图标在不同按钮尺寸下缩放错乱，或 success 图标颜色无法随 btn--primary 自动变蓝。
- 给
btn__icon显式设font-size: 1rem，避免继承放大 - SVG 内部用
fill="currentColor"，让color控制图标色（.btn--primary .btn__icon { color: #007bff; }） - 需要多色或描边时，用 CSS 变量：
<svg style="--icon-fill: #007bff; --icon-stroke: #fff"></svg>，CSS 中写fill: var(--icon-fill) - hover 或 active 状态下，只改
.btn:hover .btn__icon { color: ... }，不要在path上硬编码颜色
btn--loading 和 btn__icon--loading 不是等价替换关系
这两个类名看起来都跟 loading 有关，但职责完全不同，混用会导致样式覆盖混乱或状态不同步。
-
btn--loading是按钮的业务状态：禁用交互、改变背景、隐藏文字、显示图标 -
btn__icon--loading是图标的视觉变体：替换为 spinner SVG、启动旋转动画、调整大小 - 它们可以独立存在：比如一个按钮始终显示 loading 图标但不 disabled（调试场景），就只加
btn__icon--loading - 但生产环境绝大多数情况需同时使用，且顺序重要：
btn btn--loading必须在前，确保基础样式和禁用逻辑先生效 - 别指望
btn__icon--loading自动触发btn--loading—— BEM 不处理 JS 逻辑，状态同步由组件代码控制
BEM 类名不自动联动，它只提供清晰的语义锚点。真正容易被忽略的是：Modifier 的作用域必须严格对应 Block 或 Element 本身，一旦跨级或错位，就失去可预测性——这不是命名风格问题，是维护成本的分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
