头像组件应命名为 user-avatar 而非 avatar，以明确业务语义并避免冲突；徽标作为附属状态只能是 user-avatar__badge，修饰符须用业务意图命名（如 --new、--vip），禁止用视觉描述（如 --red）；内部图标与文字需拆为并列子元素 user-avatar__badge-icon 和 user-avatar__badge-text，禁用三层嵌套；不可共用 badge 类名，样式复用应通过 CSS 变量或 @extend 实现。
头像组件该叫 avatar 还是 user-avatar？
直接叫 avatar 是错的——它没业务语义，搜不到、改不动、复用时极易和 comment-avatar 或 notification-avatar 冲突。必须带上下文：user-avatar（用户资料页）、comment-item__avatar（评论项内）、notification-banner__avatar（通知横幅里）。徽标（badge）不是独立功能单元，而是头像的附属状态，所以它不能升格为 Block，只能是 user-avatar__badge。
user-avatar__badge 的修饰符该怎么写？
徽标类型（如“新用户”“VIP”“在线”）属于语义状态，不是视觉描述，所以修饰符必须用业务意图命名，而不是样式结果：
-
user-avatar__badge--new✅（对应设计系统中“New User”标签） -
user-avatar__badge--vip✅（可映射到主题变量--badge-vip-color） -
user-avatar__badge--online✅（与 JS 状态isOnline直接对齐） -
user-avatar__badge--red❌（换品牌色就得全局搜替换） -
user-avatar__badge--top-right❌（位置信息不该进修饰符，应由布局容器控制）
徽标图标和文字要不要拆成子元素？
要拆，但必须严格遵循单层嵌套规则。徽标内部若含图标 + 文字，不能写成 user-avatar__badge__icon —— 这是典型的三层命名违规。正确做法是：
-
user-avatar__badge作为容器，负责定位与整体状态 -
user-avatar__badge-icon和user-avatar__badge-text作为并列 Element，各自承担职责 - 禁止
user-avatar__badge-icon--small这类“元素修饰符套元素修饰符”，尺寸差异应通过父容器user-avatar--compact统一传导
为什么不能共用 badge 类名来复用样式？
看似省事，实则埋雷。比如把徽标抽成独立 Block badge，再在头像里写 <div class="user-avatar__badge badge badge--new">，会立刻导致三类问题：
<ul>
<li>调试时无法区分这个 <code>badge 是来自头像、通知还是按钮，DevTools 里全是重复类名
.badge--new 样式时，可能意外影响 button__badge--new 的圆角或阴影.badge-text 全局规则，结果评论里的徽标文字也跟着缩了真正可复用的是逻辑，不是类名。样式复用靠 CSS 变量（--badge-padding）或 Sass @extend，不是靠共享类名。
