图标组件必须作为独立 block（如 ui-icon），不得依附于其他组件命名；复用场景下禁止 btn__icon 等耦合写法，尺寸颜色须通过 css 变量控制，修饰符应表达业务状态而非样式细节。
图标组件必须作为独立 Block，不能写成 btn__icon 这类依附式类名
图标不是按钮、卡片的附属品，只要它被多处复用（比如在按钮、表单项、弹窗标题里都出现），就必须定义为独立 Block。写成 btn__icon 看似省事，但会绑架 DOM 结构——一旦图标要单独控制动画、颜色或点击行为，就只能靠 JS 拼 class 或加内联样式。
实操建议：
- 块名用语义+上下文，比如项目叫「dash」，就用
ui-icon，而不是泛泛的icon或svg-icon - 禁止全局类名如
.icon-user，它无法隔离、不可预测、极易被覆盖 - 如果图标只服务于单一组件（例如加载中旋转图标永远只出现在按钮内部），才考虑降级为元素，如
btn__icon，但需确保它不对外暴露交互接口
ui-icon 的尺寸和颜色必须通过 CSS 变量控制，而非硬编码
图标尺寸受父元素 font-size 干扰、颜色随主题切换失效，根本原因是直接用了 px 或 #007bff。BEM 不反对具体值，但反对把实现细节塞进类名或样式里。
实操建议：
- 给
ui-icon设置font-size: 1rem，避免继承放大；SVG 内部用fill="currentColor" - 颜色统一走 CSS 变量：
color: var(--icon-color, #666)，状态修饰符如ui-icon--critical只负责切换变量值，不写死色号 - 尺寸变体用修饰符：
ui-icon--sm、ui-icon--lg，对应font-size: 0.875rem和1.25rem，而非ui-icon--16px
状态修饰符必须绑定到 Block 上，且只表达业务含义
写 ui-icon--red 或 ui-icon--16x16 是典型反模式：前者换主题就得全局替换，后者把像素值当语义，既难维护又无法响应式。
实操建议：
- 修饰符命名聚焦状态或用途：
ui-icon--success、ui-icon--disabled、ui-icon--interactive - 每个修饰符必须在 CSS 中映射到变量，例如
.ui-icon--success { color: var(--color-success); } - 禁止修饰符跨级使用，比如
btn__icon--success—— 如果图标已升格为ui-icon，它就不该再从属于按钮的命名空间
SVG 图标内联时，currentcolor 和 font-size 必须协同控制
直接把 SVG 塞进 HTML，却不处理 currentColor 和尺寸继承，会导致图标在不同容器中缩放错乱、颜色丢失。这不是 BEM 的问题，而是没理解 BEM 对“职责边界”的约束。
实操建议：
-
ui-icon元素上显式设font-size，并确保其子 SVG 使用fill="currentColor" - 避免在 SVG 内写
width="16"或style="fill:#000"，这些会覆盖 CSS 控制逻辑 - 需要动态替换图标路径时，用 JS 切换
data-icon属性 + CSS 属性选择器，而不是拼接 class 名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
