avatar group必须作为独立block，因其有独立语义、可复用性及需单独控制重叠间距、溢出计数等布局逻辑，不能降级为父组件的element。
Avatar Group该不该作为一个独立 Block
该。只要它有独立语义、可复用、需单独控制布局逻辑（比如重叠间距、溢出计数），就必须是 avatar-group，而不是 user-card__avatar-group 或 card__avatars。常见错误是把它降级为某个父组件的 Element，结果导致：无法在评论区、团队页、通知栏等多处复用；重叠逻辑（如 margin-left: -0.75rem）被父容器样式干扰；溢出数字 +5 的定位和 z-index 失控。
如何命名子头像及其修饰符
组内每个头像仍是独立 Block，不是 avatar-group__avatar —— 这违反 BEM 原则，也切断了 user-avatar 的复用链。正确写法是：<div class="avatar-group">
<div class="user-avatar user-avatar--small"></div>
<div class="user-avatar user-avatar--small"></div>
</div>。关键点：
- 子头像必须带完整业务语义类名（
user-avatar），不能简化为avatar - 尺寸修饰符（如
--small）由user-avatar自身控制，avatar-group只负责排列，不干预内部状态 - 若需标记“第一个”“最后一个”用于边距微调，用
avatar-group__item--first这类中性修饰符，而非user-avatar--first（语义越界）
溢出计数（+N）怎么命名才不破坏BEM结构
溢出计数不是新 Block，而是 avatar-group 的附属展示，应命名为 avatar-group__overflow。禁止写成 avatar-overflow（丢失归属）或 avatar-group__counter（语义模糊，“counter”无法表达“超出可视范围”的业务意图）。示例结构：
<div class="avatar-group"> <div class="user-avatar user-avatar--small"></div> <div class="user-avatar user-avatar--small"></div> <span class="avatar-group__overflow">+3</span> </div>
注意：avatar-group__overflow 必须显式设 position: relative 或 z-index，否则在重叠布局中容易被头像遮盖；它的字体大小、背景色等样式应完全独立于 user-avatar，避免通过继承污染。
响应式重叠间距与断点控制的关键坑
avatar-group 的核心逻辑是子项左移重叠，但这个偏移量（margin-left）极易在响应式下失效。根本原因不是媒体查询没写，而是：
- 用了
em或%做负边距 —— 父容器 font-size 变化时，重叠错位 - 把间距逻辑写进
user-avatar--small里 —— 导致单个头像在别处使用时也带奇怪 margin - 未对
avatar-group__overflow做断点隐藏 —— 小屏下 +99 显示不全却没折叠
正确做法：所有重叠控制只在 avatar-group 内部声明，用 rem 或固定 px，并在媒体查询中统一调整 avatar-group__item 的 margin-left 和 avatar-group__overflow 的 display。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
