评论列表应拆为 comment-list、avatar、user-info、comment-actions、timestamp、floor-number 等多个独立 Block，而非仅命名 comment-list；因头像、用户信息、操作区、时间戳等均跨场景复用且具备独立功能与语义。
评论列表该拆成几个 Block，而不是怎么命名
评论列表（comment-list）本身是合格 Block，但「头像+昵称+操作区」不能硬塞进 comment-list__item 里再层层嵌套。真正要拆的是：头像（avatar）、用户信息（user-info）、操作按钮组（comment-actions）——它们各自独立、跨场景复用，且 DOM 结构不绑定于评论上下文。
常见错误是写 comment-item__avatar 或 comment-item__user-info__name，这会导致：头像样式无法在私信、作者卡片等地方复用；用户昵称改个字体就得改三处；操作按钮加个「举报」后，所有 comment-item 都得同步更新结构。
-
avatar是独立 Block：支持avatar--small、avatar--rounded，不依赖评论 -
user-info是独立 Block：含user-info__name、user-info__badge，可被评论、回复、侧边栏共用 -
comment-actions是独立 Block：含comment-actions__item、comment-actions__item--reply，不混用comment-item__action
user-info__name 为什么不能叫 comment-item__username
因为 username 的语义属于用户身份，不是评论行为。一旦设计稿要求「在作者页也显示同款昵称样式」，你就会发现：comment-item__username 在 author-profile 里根本找不到对应 Block，只能复制样式或强行挂 class，破坏 BEM 的边界隔离。
正确做法是让 user-info__name 自身具备业务含义：它代表「当前用户的公开称呼」，无论出现在评论、私信、个人主页，都用同一套类名和逻辑控制。而 comment-item 只负责布局容器和交互状态（如 comment-item--collapsed），不侵入子内容的语义。
立即学习“前端免费学习笔记（深入）”；
- Element 名永远只回答「它是什么」，不回答「它在哪」——归属关系由 DOM 位置和
__连接符隐式表达 - 禁止回溯父级语义：
comment-item__user-info__name是非法嵌套，comment-item__username是语义污染 - 如果某 Element 在两个 Block 里表现完全一致（比如
status-badge），它就该是独立 Block，而非重复定义
操作按钮组用 comment-actions 还是 comment-item__actions
必须用 comment-actions。原因很直接：操作按钮的行为逻辑（如点击后弹出菜单、触发 API、改变自身状态）与评论条目本身解耦。把按钮组塞进 comment-item__actions，等于把交互控制器和容器耦合在一起，后续加「长按展开更多」或「悬停显示快捷操作」时，JS 就得反复查询 comment-item 父节点，容易出错。
另外，comment-actions 可能需要响应全局主题变化（如暗色模式下图标颜色自动反转），这种能力只有独立 Block 才能通过 CSS 自定义属性统一控制。而 comment-item__actions 只能靠父级 class 透传，一旦父级没加 comment-item--dark，按钮就失效。
-
comment-actions是 Block，可独立测试、可带comment-actions--compact变体 -
comment-actions__item是 Element，只描述按钮类型（comment-actions__item--reply、comment-actions__item--more） - 禁止出现
comment-actions__item__icon：图标应是iconBlock 的实例，用icon icon--reply即可
哪些地方最容易漏掉 Block 边界
最常被忽略的是「时间戳」和「楼层号」这类小文本。它们看起来只是 comment-item__meta 里的一个 span，但实际在搜索结果页、通知中心、后台管理页都会复用——这时候它就应该抽成 timestamp 和 floor-number 两个独立 Block，而不是塞在评论里靠 comment-item__meta__time 强撑。
另一个高危点是「已读/未读状态」。别写 comment-item--read，这属于生命周期状态，不是视觉变体。应该用 data-read="true" 配合 JS 控制，或引入通用状态类 is-read（不属于 BEM 结构，但语义明确、可跨组件复用）。
- 每个 HTML 节点有且仅有一个 BEM 类名，不能靠父级 class 透传样式（如
comment-item .time） - Modifier 必须能被 CSS 独立生效：删掉
comment-actions--compact，按钮组仍能正常渲染，只是尺寸不同 - 只要类名里出现
small、gray、left这类直接对应 CSS 值的词，大概率该重构成语义化 Modifier（--size-small、--theme-gray）或抽成独立 Block
