BEM规范要求CSS选择器嵌套不超过3层，超层需改用单类名如.comment__avatar；Element不可嵌套，状态类用is-前缀；@at-root仅用于media/伪类提级；HTML结构必须同步更新以匹配类名。
评论列表嵌套超3层时，必须删掉最内层选择器
遇到 .comment-list .comment .reply .author .avatar 这类5层选择器，别补 & 或加 !important，直接删掉 .author .avatar 这层——浏览器匹配时会先找所有 .avatar，再逐层向上验证父级，DOM节点一多就卡。真实项目里，滚动卡顿、classList.add("is-expanded") 失效，往往就卡在这儿。
- 重构动作：把
.comment .reply .author .avatar改成单类名.comment__avatar或.reply__avatar - 注意：
.comment__avatar和.reply__avatar是两个独立 Element，不能写成.comment__reply__avatar（BEM 禁止 Element 嵌套 Element） - 如果头像在多个上下文复用（如评论、用户资料页、通知弹窗），它就该是独立 Block：
.avatar，而非任何 Block 的子元素
如何给回复项（reply）正确命名而不破坏BEM层级
.comment__reply 是合法的，但 .comment__reply__content 就越界了——BEM 只允许 Block → Element 一层直达，不允许 Element 再套 Element。内容区不是“回复的子元素”，而是“回复这个 Block 的一部分”。
- 正确命名：
.comment__reply（Block）、.comment__reply-content（Element）、.comment__reply-time（Element） - 错误写法：
.comment__reply .comment__reply-content（后代选择器冗余）、.comment__reply__content__text（Element 套 Element） - 状态类走
is-前缀：is-collapsed、is-loading，不混进 BEM 主结构
@at-root 要用在 media 和伪类提级上，而不是逃逸嵌套
写 @media (min-width: 768px) { .comment { &__reply { } } } 很危险：外层若还有 .page .article，& 会展开全部路径，产出 .page .article .comment__reply 这种6层选择器。这不是响应式，是样式炸弹。
- 正确做法：
.comment__reply { @at-root (with: media) { @media (min-width: 768px) { padding: 16px; } } } -
@at-root不是“跳出当前块”，而是“把这段规则提到根级输出”，确保编译后是平级@media规则，不增加权重 - 伪类同理：
.comment__reply:hover直接写，别套在.comment { &:hover { &__reply { } } }里
HTML结构必须同步调整，否则BEM只是自欺欺人
光改 CSS 类名没用。如果 DOM 还是 <div class="comment"><div class="reply"><div class="author"><img class="avatar" alt="在CSS中遇到嵌套过深的评论列表时如何重构BEM？" ></div></div></div>，那 .comment__avatar 就永远不生效。
立即学习“前端免费学习笔记（深入）”；
- 必须同步改 HTML：
<div class="comment__avatar"></div>或<div class="reply__avatar"></div> - 禁止保留无语义的中间容器：
<div class="author"> 这类纯布局 wrapper 应该被移除或替换为带 Block 前缀的类 <li>组件复用场景下（如回复框也用在私信页），优先抽成独立 Block：<code>.reply-form，而非硬塞进.comment下
真正卡住人的从来不是语法记不住，而是改完 CSS 后忘了动 HTML，或者以为
&__reply 能自动修复 DOM 层级错位。BEM 不是命名游戏，是 Block、Element、Modifier 和 HTML 结构三者咬合的机械装置——松一颗螺丝，整个链路就打滑。
