bem中图标子元素应命名为btn__icon，位置通过btn--icon-left等modifier控制；伪元素图标可保留btn__icon类名作语义标记，但推荐显式dom元素以保障可维护性与无障碍支持。
按钮组件中如何用BEM命名图标子元素
图标的定位不是靠额外加类名“强行塞进去”，而是作为按钮的固有组成部分，用 __icon 明确语义。Element（即双下划线后的部分）必须是按钮功能逻辑的一部分，比如 btn__icon 而不是 btn__left-icon 或 btn__start-icon——位置信息属于修饰符（Modifier），不该污染 Element 名称。
常见错误是写成 btn__icon-left，这混淆了结构和样式职责：BEM 的 Element 描述“它是什么”，不是“它在哪”。位置应由修饰符或 CSS Flex/Grid 控制。
-
btn__icon表示“按钮里的图标”，语义清晰、可复用 - 若需区分类型（如加载态图标），用 Modifier：
btn__icon--loading - 图标方向（左/右）不体现在 Element 名里，而通过
btn--icon-left这类 Modifier 配合 CSS 实现
如何用Modifier控制图标在按钮中的左右位置
位置属于外观变体，适合用 Modifier 处理。BEM 规范中 Modifier 是可选的、描述状态或外观的后缀，用单连字符连接，如 btn--icon-left。它不改变结构，只影响样式表现。
关键点在于：Modifier 必须作用于 Block（btn），而不是 Element（btn__icon）。因为“图标在左边”是整个按钮的布局特征，不是图标的内在属性。
- 正确：
<button class="btn btn--icon-left"><span class="btn__icon"></span>提交</button> - 错误：
btn__icon--left（把布局责任错配给 Element） - 对应 CSS 中用
flex-direction或order控制子元素顺序，而非绝对定位硬编码 left/right
图标作为伪元素时还能用BEM吗
能，但要谨慎。如果图标用 ::before 或 ::after 实现（例如基于字体图标或 SVG data URL），它在 DOM 中并不存在，也就没有独立的 Element 可绑定类名。此时 btn__icon 类名应保留在按钮本身上，作为“该按钮带图标”的语义标记，样式通过伪元素实现。
这种写法不破坏 BEM 结构，但会丢失对图标的单独控制能力（比如无法单独隐藏/替换/动画图标）。所以更推荐显式 DOM 元素 + btn__icon。
- 保留语义：即使没真实子节点，
btn__icon仍可作为 CSS 选择器锚点，如.btn__icon::before - 避免混合：不要同时存在真实
<span class="btn__icon"></span>和伪元素图标，易引发维护混乱 - 性能提示：伪元素图标在 SSR 或无障碍场景下可能不可读，优先用 inline SVG 或
<svg></svg>元素
为什么不能把图标写成 btn\_\_icon--left
因为 btn__icon--left 违反 BEM 命名层级原则：Element（__icon）表达的是“按钮内部的图标”，它的 Modifier 应描述图标自身状态（如 --loading、--success），而非它相对于按钮的位置。位置是 Block 级布局策略，强行下放到 Element 层，会导致：
- 同一个图标在不同按钮中需重复写多个类（
btn__icon--left/btn__icon--right），违背可复用性 - 无法统一控制图标间距逻辑（比如所有左图标前距统一为 8px），因为类名已绑定到具体位置
- 当按钮结构变化（如加 badge、多图标），
__icon--left语义立即失效
真正复杂的按钮布局（比如图标+文字+角标+下拉箭头）需要靠 Block 内部的 flex/grid 排列 + Modifier 组合控制，而不是靠不断膨胀的 Element 变体名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
