图标不应作为独立 block，而应作为所属组件的 element（如 btn__icon），以确保语义清晰、作用域明确、样式隔离；修饰符需正交分层，禁止混写尺寸与状态，颜色/旋转等必须绑定具体块而非全局变量。
图标不该是独立 Block，而是依附于组件的 Element
直接定义 .icon 块是错的——字体图标（如 Iconfont、Font Awesome）没有交互逻辑、不承载业务语义，不符合 BEM 中 Block 必须是「独立可复用功能单元」的要求。强行升格为 Block 会导致样式污染、跨组件覆盖、主题色无法隔离。
正确做法是把图标作为所属组件的 Element：按钮就用 btn__icon，用户卡片就用 user-card__avatar，导航项就用 nav-item__icon。每个 __icon 都绑定到具体块名，语义清晰、作用域明确。
- 禁止写
.icon--loading或.icon--sm：这类全局修饰符会破坏上下文，PurgeCSS 可能误删，重构时也无法单独调整 - 允许复用视觉规则，但必须通过工具类解耦：比如所有 loading 图标都要旋转，可提取
.is-spinning，但 BEM 层仍保留btn__icon--loading - 若图标真需跨多个组件无修改复用（如通用关闭图标），才考虑升格为
icon块，此时尺寸/状态修饰符必须是icon--size-sm、icon--close，而非icon__svg--size-sm
修饰符必须正交分层，不能混写尺寸和状态
常见错误是写 btn__icon--sm-loading 或 btn__icon--disabled-small。这违反 BEM 修饰符单一职责原则：尺寸是变体（variant），加载/禁用是状态（state），它们应正交叠加、互不干扰。
HTML 应该是：<i class="btn__icon btn__icon--sm btn__icon--loading"></i>，两个修饰符平级共存；CSS 分别定义：
.btn__icon--sm { font-size: 16px; line-height: 1; }
.btn__icon--loading { animation: spin 1s infinite; }
- 尺寸类用单选逻辑控制，避免同时存在
--sm和--lg：JS 映射时建议用三元表达式或 Map 显式排他 - 状态类用布尔映射：
{ 'btn__icon--loading': isLoading, 'btn__icon--error': hasError } - 禁止在修饰符里重复设
color或display：基础类btn__icon应统一声明display: inline-block、font-size、vertical-align，修饰符只改自己负责的属性
颜色和旋转等样式要靠修饰符显式声明，别依赖 CSS 变量“猜”
有人图省事，在 :root 里设 --icon-color，再让不同主题动态改这个变量。问题在于 SSR 渲染时变量未生效、伪类继承丢失、第三方库 DOM 漏更新——最终图标颜色在某些路径下就是白的或黑的，查不出源头。
颜色必须绑定到具体块：btn__icon--error、notification__icon--light，而不是泛化的 .icon--dark。旋转同理：btn__icon--rotate-90 比 .icon--rotate 更安全，因为前者确保 display: inline-block 已由基础类提供，不会因缺失 display 导致 transform 失效。
- 若用伪元素插入图标（
::before），颜色修饰符必须同时作用于伪元素：.btn__icon--error::before { color: var(--color-error); fill: var(--color-error); } - 旋转修饰符不要只写
transform: rotate()，必须带display: inline-block或确保基础类已设置 - 所有尺寸控制建议用 CSS 自定义属性集中管理：
.btn__icon { --icon-size: 20px; }，然后.btn__icon--sm { --icon-size: 16px; }，内部 SVG 直接消费width: var(--icon-size)
第三方图标库或字体文件引入时，BEM 类名不能侵入外部结构
不要把 .ant-btn__icon 或 .el-icon-close 直接塞进你的 BEM 结构——这违反块边界，ant-btn 是别人家的 Block，你不该侵入。也不该跨块命名，比如写 .card__button，如果 button 是独立 Block，它就不该被 card “拥有”。
- 若必须集成第三方组件，用 wrapper 封装：
<div class="my-card"><el-button class="my-card__action"></el-button></div>，样式只作用于.my-card__action - 自定义
@font-face引入图标字体时，修饰符不能只改外观，还得确保字符映射不被破坏：比如用::before { content: "\e901"; }，旋转修饰符必须作用于整个元素，而不是伪元素本身 - 团队内统一约定：所有设计稿中的图层层名必须匹配 BEM，比如 Figma 里按钮图层叫
button--primary，而不是blue-btn；这样开发时 grep 就能准确定位，PR 评审也无需口头解释
最易被忽略的一点：BEM 不是命名游戏，它是对“谁该负责什么”的显式契约。当你犹豫要不要加一个 -- 修饰符时，先问一句——这个变化是否属于当前 Block 的固有变体？如果不是，它大概率该挪到父级 Modifier，或抽成独立 Block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
