正确做法是用 comment--nested 修饰符标识嵌套评论，保持类名扁平；comment__reply__content 违反BEM原则，因 reply 非独立块，且导致权重过高、查询困难、复用性差。
评论列表中嵌套回复怎么起BEM类名
直接用 comment__reply 会和一级回复混淆，尤其当回复还能再回复时。BEM不支持“无限递归命名”，comment__reply__reply 这种写法违反语义，也难维护。
正确做法是把嵌套层级交给结构本身表达，类名保持扁平：
-
comment是最外层块（每条评论都是独立块） -
comment__content、comment__author等只描述当前块的元素 - 嵌套回复用另一个
comment块，加修饰符区分状态：comment--nested - 通过 DOM 层级（如
.comment > .comment）控制样式继承或缩进，而非靠类名嵌套
为什么不能用 comment__reply__content 这类三层命名
BEM 的 __ 只允许连接“块”和“直接子元素”，comment__reply__content 实际暗示存在一个叫 reply 的中间块——但 BEM 要求每个块必须有独立语义和复用能力。如果 reply 不是可独立使用的 UI 单元，它就不该作为块存在，更不该成为命名链的一环。
这种写法还会导致：
立即学习“前端免费学习笔记（深入）”；
- CSS 选择器权重虚高（
.comment__reply__content比.comment--nested .comment__content更重，后期难覆盖） - JS 查询困难：你得写
el.querySelector('.comment__reply__content')，但实际 DOM 里可能根本没有reply元素节点 - 组件化时无法复用：父组件传入的
replies数据，渲染的仍是comment块，不是reply块
comment--nested 修饰符该怎么用才不破坏BEM原则
修饰符用于表达同一块的变体，comment--nested 表示“这是一个评论块，且处于嵌套位置”，它不改变块的本质，只调整表现（缩进、边框、字体大小等）。
关键约束：
- 修饰符必须作用于块本身：
<div class="comment comment--nested">，不能加在子元素上 <li>所有子元素仍用原始块名：<code>comment__author、comment__time，不变成comment--nested__author - 嵌套层级深度不影响类名数量：二级、三级回复都用
comment--nested，靠 CSS 的后代选择器或 JS 动态加深度类（如comment--nested-level-2）来微调，而非改 BEM 结构 - 用
:where()降权：:where(.comment--nested) .comment__content { padding-left: 24px; } - 对关键子元素加嵌套限定：
.comment--nested .comment__author { font-size: 0.9em; }，而不是只靠块级修饰符 - 禁用全局样式污染：确保
comment块内所有样式都以.comment开头，不依赖上下文（如避免写.comment p，改用.comment__content p） - 如果嵌套超过 3 层，考虑用 CSS 自定义属性控制缩进：
--comment-nest-indent: 24px;，由 JS 根据 depth 设置
真实项目中如何避免嵌套评论样式失控
DOM 层级越深，CSS 越容易意外穿透。比如 .comment__content p 可能同时命中顶层和嵌套评论里的段落。
推荐组合策略：
真正难处理的不是命名，而是让每个 comment 块在任意嵌套深度下，既保持视觉一致性，又不靠 DOM 深度做样式判断——这需要从组件设计阶段就切断样式对结构层级的依赖。
