icon 不该是 block，因其仅为视觉符号、无交互与业务语义，违背 bem 中 block 必须为独立可复用功能单元的要求；应作为 element（如 btn__icon）存在，颜色通过 modifier（如 btn__icon--error）或 css 自定义属性控制，确保语义清晰、样式隔离、主题可维护。
不能定义独立的 icon 块来管理字体图标颜色 —— 因为图标本身不是功能单元，强行升格为 Block 会破坏语义归属，导致样式污染和跨组件覆盖。
为什么 icon 不该是 Block？
字体图标（如 Iconfont、Font Awesome）本质是视觉符号，没有交互逻辑、不承载业务语义。BEM 要求 Block 必须是「独立可复用的功能单元」，比如 user-card、nav-menu。把 icon 当作 Block，等于让一个装饰性元素去承担结构职责，后果很直接：
- 改
icon--red时，可能意外影响header__icon--red或sidebar__icon--red -
icon类全局存在，CSS specificity 易失控，!important会泛滥 - 无法按组件隔离主题色：同一图标在不同模块里需要不同颜色，但修饰符却只能写一套
颜色该挂在哪一层？Block 还是 Element？
颜色是外观变体，属于 Modifier 层级，但它必须依附于有明确上下文的 Block —— 比如 user-card__icon 或 btn__icon，而不是裸奔的 icon。正确路径是：
- 先确定图标归属的 Block（例如按钮、卡片、表单项）
- 用
block__icon声明 Element，表示“这个 Block 下的图标区域” - 颜色修饰符只作用于该 Element，写成
block__icon--red或更语义化的block__icon--error - 禁止写
icon--red或block__icon--color-red：前者脱离上下文，后者冗余且混淆职责
block__icon--red 怎么写才不踩坑？
直接加 color: red 往往无效，因为字体图标依赖伪元素或 Unicode 字符，颜色控制点可能不在元素本身。关键在于统一入口：
- 基础类
block__icon必须声明display: inline-block和font-size，并确保字体族已加载（font-family: 'iconfont'） - 颜色修饰符只改
color和fill（兼容 SVG 图标），不碰font-size或vertical-align - 若用伪元素插入图标（
::before），颜色需同时作用于伪元素：#block__icon--error::before { color: var(--color-error); } - 避免在多个修饰符里重复设
color：如果block__icon--loading也写了color，它会覆盖--error—— 所以每个 Modifier 只管自己那件事
真正需要颜色隔离的场景，怎么解？
当同一个图标在不同模块中必须呈现不同主题色（比如 dark mode 下 header 用白，modal 用灰），靠修饰符硬编码 --red/--gray 会迅速失控。这时候要退一步：
- 放弃用 BEM 类名控制具体颜色值，改用 CSS 自定义属性：
block__icon { color: var(--icon-color, currentColor); } - 在 Block 容器上设置变量：
user-card { --icon-color: #e53e3e; }、modal { --icon-color: #718096; } - 修饰符只负责开关状态（如
block__icon--disabled），不绑定具体色值 —— 这样换主题时只需改变量，不用动类名
最易被忽略的一点：颜色修饰符从来不是孤立存在的，它必须和 Block 的语义、Element 的定位、以及父容器的配色策略对齐。写 btn__icon--red 看似简单，但如果按钮本身没定义 --color-primary 变量体系，这个 red 就只是个临时补丁，不是接口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
