应定为更高阶的组合块如 user-icon；badge 与 avatar 同为 user-icon 的元素，分别命名为 user-icon__avatar 和 user-icon__badge，体现语义层级而非视觉位置。
Badge 和 Avatar 组合时，BEM 的块名该定为哪个？
不要把 Avatar 当作父块、Badge 当作修饰符来写，比如 avatar__badge —— 这违反 BEM 原则：Badge 不是 Avatar 的视觉变体，而是独立语义组件，只是视觉上叠加在头像右上角。正确做法是让两者共属一个更高阶的组合块，比如 user-icon 或 profile-indicator，它才是真正的 Block。
如何用 BEM 表达“Badge 叠在 Avatar 右上角”这个布局关系？
BEM 不管绝对定位细节，只管命名结构。布局靠 CSS 实现，命名靠语义分层。推荐结构：
<div class="user-icon"> @@##@@ <span class="user-icon__badge">9+</span> </div>
其中：
- user-icon 是 Block（代表“带状态标识的用户头像”这一完整 UI 单元）
- user-icon__avatar 和 user-icon__badge 是 Element，地位平等
- 不用 user-icon__avatar--with-badge 这类修饰符——Badge 是否显示由数据控制，不是 Avatar 的一种“样式变体”
Badge 需要支持多种状态（online / offline / unread），BEM 怎么扩展？
状态属于 Badge 自身语义，应通过修饰符加在 user-icon__badge 上，而不是提升到 Block 层：
-
user-icon__badge：基础态（如未读数） -
user-icon__badge--online：在线小绿点 -
user-icon__badge--offline：灰点 -
user-icon__badge--unread：数字徽标（默认）
这样既保持可组合性，又避免 Block 层被状态爆炸污染。注意：不要写成 user-icon--online，那会让人误以为整个 user-icon 进入了“在线模式”，而实际只是 Badge 状态变化。
和第三方 UI 库（如 Ant Design、Element Plus）混用时要注意什么？
这些库通常自带 BEM 类名（如 el-avatar、el-badge），直接嵌套会导致命名冲突或语义断裂。建议：
- 不复用其内部 BEM 类名做自定义样式（比如不写
.el-badge__content），改用 wrapper 包一层，走自己的user-icon体系 - 若必须透传 class，用
user-icon__avatar包裹el-avatar，再用user-icon__badge包裹el-badge，确保外层结构可控 - 警惕
el-badge默认把 badge 渲染在子元素内部（如用slot），这会破坏你对 DOM 层级的掌控——必要时用hidden隐藏原生 badge，自己用user-icon__badge重绘
真正难的从来不是怎么写 class 名，而是判断“这个视觉单元到底算不算一个新 Block”。一旦把 Badge 当成 Avatar 的附属，后续加通知角标、悬停 tooltip、点击反馈，都会被迫不断往 avatar__xxx 里塞，最后变成不可维护的命名泥潭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
