不能定义独立的 icon 块，因为图标不是独立可复用的功能单元，而是依附于具体组件（如 user-card、nav-menu）的视觉符号；bem 要求 block 必须有明确业务语义和功能边界，强行将 icon 升格为 block 会破坏层级语义、导致样式污染与维护失控。
直接用 .icon 作为全局类名管理字体图标，必然导致样式污染、覆盖难控、无法按组件隔离——BEM 要求图标必须归属明确的块（Block），不能脱离上下文存在。
为什么不能定义一个独立的 icon 块
字体图标（如 Font Awesome、Iconfont）本身不是功能完整的 UI 组件，它没有交互逻辑、不承载业务语义，只是一个视觉符号。BEM 中的 Block 必须是「独立可复用的功能单元」，比如 user-card、nav-menu；而 icon 是依附型元素，强行升格为 Block 会破坏层级语义，也违背 BEM “谁在用、在哪用、为什么用”的约束原则。
- 常见错误：
<i class="icon icon--user"></i>——.icon没有归属，.icon--user无法判断属于哪个模块 - 后果：改
.icon--user颜色时，可能意外影响sidebar__icon--user或header__icon--user - 正确路径：图标必须作为某个 Block 的 Element 出现，例如
user-card__icon、nav-menu__icon
icon 类名该出现在哪一层：Block / Element / Modifier
字体图标在 BEM 结构中只应作为 Element（即双下划线后部分），且必须绑定到具体 Block。它的类名形式只能是 block__icon，而非 icon 或 block__icon--user。
-
block__icon是标准写法，表示“这个 Block 下的图标区域”，职责清晰 -
block__icon--loading可以存在，但仅限描述状态（如加载中），不是图标类型 - 图标含义（如 user、home、close）应通过自定义属性或伪元素内容控制，而非塞进类名：
<i class="user-card__icon" data-icon="user"></i> - 禁止写
user-card__icon--user：这混淆了“结构角色”和“语义内容”，违反 BEM 对 Element 的定义
如何统一控制字体图标的尺寸、旋转与对齐
字体图标本质是内联文本，transform、font-size、vertical-align 都受父级行高与基线影响。统一控制的关键是：基础类设好 display 和基线偏移，修饰符只负责变体，不重复声明布局属性。
- 基础类（如
user-card__icon）必须显式声明：display: inline-block（否则transform: rotate()无效）、font-size: 1em、line-height: 1、vertical-align: -0.125em - 尺寸修饰符（如
user-card__icon--sm）只改font-size: 0.75em，不碰line-height或vertical-align - 旋转修饰符（如
user-card__icon--rotate-90）只写transform: rotate(90deg)，不重复设display - 多个修饰符叠加顺序不影响效果，但建议语义优先：
user-card__icon user-card__icon--sm user-card__icon--rotate-90
字体图标与自定义 @font-face 如何配合 BEM
用 @font-face 引入私有图标字体时，BEM 不仅要管类名，还要管字符映射逻辑。不能让修饰符去改 content 或 Unicode 值，那会破坏封装性。
- 推荐方式：基础类
block__icon统一设font-family和font-style: normal，再用伪元素注入内容：block__icon::before { content: "\e901"; } - 不同图标由不同伪元素或数据属性驱动，例如：
<i class="nav-menu__icon" data-type="home"></i>，CSS 中用[data-type="home"]::before { content: "\e901"; } - 禁止在修饰符里重写
content：避免block__icon--home::before这种写法，它会让类名承担内容职责，不可维护 - 若需主题化（如暗色模式换图标），用 CSS 变量传入 Unicode：
content: var(--icon-home, "\e901");
BEM 管理字体图标最易被忽略的一点：所有样式控制必须收束在 Block 的作用域内，不能靠父容器的 color 或 font-size “顺带生效”。一旦图标出现在嵌套较深的组件里，继承链就会失控——所以每个 block__icon 都得是视觉上自包含的最小单位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
