Icon类名必须绑定到块名，不能脱离上下文单独使用；正确写法是button__icon--loading、user-card__avatar--sm，禁止全局.icon--*类，尺寸与状态修饰符需正交叠加、分层控制，主题色须依附具体块而非CSS变量“猜”。
Icon类名必须绑定到块名，不能脱离上下文单独使用
直接写 .icon--loading 或 .icon--small 是错的——BEM 要求修饰符必须依附于具体块，否则语义断裂、样式污染、构建工具误删。比如你项目里有按钮里的 icon、列表项里的 icon、侧边栏里的 icon，它们尺寸、颜色、对齐逻辑全不同，但若共用一个孤立的 .icon--small，就等于把所有场景耦合进同一个命名空间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个使用 icon 的组件定义自己的块名，如
button__icon、user-card__avatar，再加修饰符：button__icon--loading、user-card__avatar--sm - 禁止在全局 CSS 里声明
.icon--*类；若真需复用视觉规则（比如所有 loading 图标都要旋转），提取为工具类.is-spinning，但 BEM 层仍保留语义修饰符 - PurgeCSS 等工具会删掉未出现在 HTML 中的 class，而
button__icon--loading只在 JS 动态添加时出现，必须在safelist中显式保留正则：/button__icon--(loading|error|success)/
尺寸类和状态类要分层，别混成一个修饰符
常见错误是写 button__icon--sm-loading 或 button__icon--disabled-small，这违反 BEM 修饰符单一职责原则：尺寸是变体（variant），加载/禁用是状态（state），它们正交、可叠加、不可嵌套。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 尺寸类用单选逻辑控制，避免同时存在
--sm和--lg：const sizeMod = size === 'lg' ? 'button__icon--lg' : size === 'sm' ? 'button__icon--sm' : null; - 状态类用布尔映射：
{ 'button__icon--loading': isLoading, 'button__icon--error': hasError } - HTML 最终是：
<i class="button__icon button__icon--sm button__icon--loading"></i>，两个修饰符平级并存 - CSS 中分别定义：
.button__icon--sm { width: 16px; height: 16px; }和.button__icon--loading { animation: spin 1s infinite; }，不互相覆盖
颜色和主题切换别靠 CSS 变量“猜”，用修饰符显式声明
有人图省事，在 :root 里设 --icon-color，再让不同主题动态改这个变量。问题在于 SSR 渲染时变量未生效、伪类继承丢失、第三方库 DOM 漏更新——最终图标颜色在某些路径下就是白的或黑的，查不出源头。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主题相关样式必须绑定块名：
.button__icon--dark、.notification__icon--light，而不是泛化的.icon--dark - 所有主题修饰符写在同一份 CSS 文件中，按组件组织，禁止拆成
theme-light.css和theme-dark.css - JS 切换主题时，只改根节点
data-theme="dark"，组件内靠修饰符响应：[data-theme="dark"] .button__icon--dark { color: #fff; } - 不要在修饰符里写
!important去压 CSS 变量，那说明选择器权重设计错了——BEM 修饰符本身权重已足够，.button__icon--dark比.button__icon高一级就够了
SVG Icon 内联时，修饰符如何影响 <svg></svg> 内部元素？
当 SVG 是内联写法（非 <img alt="如何在CSS BEM中优雅地处理Icon图标的样式变化？" >），且需要动态改 path 颜色、stroke-width 或 visibility，就不能只靠外层 class 控制。比如 .button__icon--error 要让内部 <path></path> 变红，但又不能污染其他 icon 的 path 样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给 SVG 加
class="button__icon-svg"，再用后代选择器精准控制：.button__icon--error .button__icon-svg path { fill: #dc3545; } - 避免用属性选择器如
[fill]或通配svg path，否则会命中所有 SVG，包括第三方图标字体 - 若 SVG 结构复杂（含
<g></g>、<use></use>），修饰符应作用于最外层<svg></svg>，再通过currentColor继承文本色：.button__icon--primary { color: #007bff; }，内部path设fill="currentColor" - React/Vue 中传
iconColorprop 时，别拼字符串：fill={iconColor}，而是用修饰符驱动：className={cn('button__icon', { 'button__icon--primary': variant === 'primary' })}
--loading 类，而是让每个 icon 的尺寸、状态、主题、内联结构都落在它所属的块语义里——脱离块名的修饰符，就像没地址的快递，谁也找不到收件人。 
