直接用 .icon--rotate 会失效是因为图标字体是内联元素，transform 对 display: inline 元素默认不生效，需显式设置 display: inline-block 或 inline-flex 才能激活。
为什么直接用 .icon--rotate 会失效
很多人写 .icon--rotate 后发现图标不转，其实是没意识到图标字体（如 Font Awesome、Iconfont）本质是内联元素，transform: rotate() 对 display: inline 元素默认不生效——浏览器不会为纯文本内容触发 transform 布局重排。必须显式设置 display: inline-block 或 display: inline-flex 才能激活 transform。
- 错误写法：
.icon--rotate { transform: rotate(90deg); }（无 display 调整，无效） - 正确写法：
.icon--rotate { display: inline-block; transform: rotate(90deg); } - 更稳妥的做法是统一基础类设
display: inline-block，避免修饰符里重复声明
.icon--size-sm 和 .icon--size-lg 怎么定尺寸才不破坏对齐
图标字体的尺寸不能只靠 font-size 硬调，否则容易和行高、垂直对齐冲突。BEM 修饰符应配合 line-height 和 vertical-align 一起控制。
-
.icon基础类建议设：font-size: 1em; line-height: 1; vertical-align: -0.125em;（-0.125em 是多数图标字体的视觉基线偏移经验值） -
.icon--size-sm可设：font-size: 0.75em; line-height: 1;（保持 line-height=1 避免撑高容器） -
.icon--size-lg可设：font-size: 1.5em; line-height: 1; - 切忌在修饰符里改
vertical-align—— 它应由基础类统一定义，否则多个修饰符叠加时会互相覆盖
旋转 + 尺寸修饰符叠加时的 class 顺序有没有影响
没有影响。CSS 类名顺序不影响选择器权重，只要两个修饰符都作用于同一个元素，样式就会合并生效。但 BEM 的语义顺序建议按「功能优先级」组织：基础类在前，尺寸类次之，状态/行为类（如旋转）在后，方便人眼快速识别意图。
- 推荐写法：
<i class="icon icon--size-lg icon--rotate"></i> - 反例（语义混乱）：
<i class="icon icon--rotate icon--size-lg"></i>（虽然效果一样，但读代码时得倒着理解） - 注意：如果两个修饰符都写了
display或font-size，后声明的会覆盖前者——这不是顺序问题，而是 CSS 层叠规则，所以修饰符之间要职责分明
用 @font-face 自定义图标字体时，BEM 修饰符要注意什么
自定义图标字体常通过 Unicode 映射或伪元素插入，这时修饰符不能只改外观，还得确保字符映射不被破坏。比如用 ::before { content: "\e901"; } 的方式，旋转修饰符必须作用于整个元素，而不是伪元素本身。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
<span class="icon icon--rotate"></span>，修饰符作用于.icon，再由.icon::before渲染图标 - 错误结构：
.icon--rotate::before { transform: rotate(90deg); }（transform 不会作用于伪元素生成的内容，且可能触发渲染 bug） - 如果用了 SVG symbol +
<use></use>方式，BEM 修饰符应加在<svg></svg>容器上，而非<use></use>标签——后者不支持 transform
vertical-align 和 line-height 的初始化——它决定了所有修饰符能否稳定叠加。一旦这里没设对，后续每个尺寸、旋转、颜色修饰符都会出现微小错位，调试起来反而比重写还费时间。 
