应使用 block-size，因图标作为独立块需逻辑尺寸控制，block-size适配不同书写模式，而element-size非标准CSS属性。
图标尺寸该用 block--size 还是 element--size
图标作为独立可复用单元，必须定义为 icon 块（block），而不是其他组件的子元素。所以尺寸控制应落在 icon--size-sm 这类块级修饰符上，而非 button__icon--size-sm。后者把尺寸逻辑绑定到按钮上下文，导致同一图标在导航栏、弹窗、卡片里要重复写三套修饰符，也违背“block 独立存在”原则。
常见错误现象：user-avatar__icon--large —— avatar 本身已是 block，它的 icon 子节点若只服务自身且不对外暴露接口，才可作 user-avatar__icon；但一旦这个图标被抽成通用图标库，它就必须升格为独立 icon 块。
- 判断依据：删掉这个图标，功能是否缺失？能否在 footer、sidebar、modal 中无修改复用？是 → 它就是
iconblock - 尺寸变体属于键值型修饰符，必须带语义化值：
icon--size-sm、icon--size-lg，禁用icon--large（布尔型）或icon--24px（含技术单位） - 不要用
icon__svg--size-sm：SVG 是实现细节，不是语义元素；icon块内部结构由组件封装，外部只关心“它是什么”，不关心“怎么画”
如何避免 .icon--size-sm 和 .icon--size-lg 样式互相覆盖
BEM 修饰符只作用于挂载它的那个节点，.icon--size-sm 不会自动影响其子元素，但如果你在 CSS 中写了后代选择器，比如 .icon--size-sm svg { width: 16px; }，而另一处又写了 .icon--size-lg svg { width: 24px; }，就可能因 CSS 加载顺序或 specificity 导致覆盖。
正确做法是让每个修饰符类直接控制自身节点的样式变量，再由内部元素消费：
立即学习“前端免费学习笔记（深入）”；
.icon {
--icon-size: 20px;
}
.icon--size-sm {
--icon-size: 16px;
}
.icon--size-lg {
--icon-size: 24px;
}
.icon svg {
width: var(--icon-size);
height: var(--icon-size);
}
- 所有尺寸逻辑集中在
--icon-size这一个自定义属性上，避免多处硬编码 - 修饰符类不写具体样式规则，只设变量；这样换主题时只需改变量值，不用动选择器
- 禁止用
.icon--size-sm .icon__svg这类后代选择器——BEM 要求选择器与类名严格一一对应
图标方向（左/右/上）该不该放进修饰符
方向不是图标自身的状态，而是它在容器中的布局位置，属于父级上下文职责。因此不能写 icon--left 或 icon--align-right，这混淆了“它是什么”和“它在哪”。
真实使用场景中，图标常和文字并排（如按钮内），此时应由父 block 控制布局，例如：
- 按钮用
button--icon-left修饰符，CSS 里用 flex 控制button__icon和button__text的顺序 - 图标本身仍保持
icon或icon--size-md，不感知位置 - 若某处需图标翻转（如 RTL），用
icon--flip-h，这是行为修饰符（flip 是交互响应动作），不是布局修饰符
容易踩的坑：icon--start、icon--leading 这类命名看似现代，实则把 CSS 布局逻辑塞进了 BEM 类名，后续加 Grid 布局或容器查询时会卡死。
为什么 icon--theme-dark 是错的，而 icon--variant-outline 才对
icon--theme-dark 把图标绑定了全局主题，违反“block 独立可复用”原则。一个图标在深色模式下可能是描边，在浅色模式下可能是填充，但这个决策不该由图标自己做，而应由使用它的上下文决定（比如 header--theme-dark 触发整块区域的变量变更）。
icon--variant-outline 描述的是图标自身的视觉变体类型，和主题无关，可预测、可枚举、可复用：
-
icon--variant-outline：描边风格，适用于强调轮廓的场景 -
icon--variant-solid：实心风格，适用于高对比或小尺寸 -
icon--variant-duotone：双色风格，需配合 CSS 变量控制两色
关键区别在于：variant 是图标固有表达方式，theme 是环境上下文。前者可静态声明、JS 切换、无障碍标注；后者必须动态注入、跨组件同步、易受媒体查询干扰。BEM 的修饰符必须能被 JavaScript 安全读取和切换，icon--theme-dark 在非主题上下文中根本无法生效。
