嵌套评论应采用扁平化 DOM 结构，用 data-depth 控制缩进，避免深层 Grid 嵌套；每级需网格行为的容器必须显式声明 display: grid；超 3 层时降级为 Flex 以保性能与兼容性。
嵌套评论的 DOM 结构怎么组织才不崩
直接用 <div class="comment"> 套 <div class="comment"> 是安全且推荐的，BEM 要求块可复用、语义完整，comment--nested 这类修饰符只控制缩进/字号等表现，不改变块本质。别写 comment__reply__content ——它暗示存在一个叫 reply 的中间块，但实际没有独立逻辑或样式边界，JS 查询时也找不到对应节点。
常见错误现象：document.querySelector('.comment__reply__content') 返回 null，因为 DOM 里根本没这个类；CSS 权重虚高导致覆盖困难；后端返回扁平化数组时，前端硬拼嵌套结构，一刷新就错位。
- 用
data-depth控制缩进：<div class="comment" data-depth="2">，配合[data-depth="2"] { margin-left: 48px; } - 避免
.comment .comment .comment这类后代选择器——加个 wrapper 就失效 - JS 查询统一用
document.querySelectorAll('.comment')，不依赖层级
Grid 嵌套必须显式声明 display: grid
父容器设了 display: grid，子容器不会自动继承网格能力。常见错误是只在外层设 grid，里面包一层 div 就以为能用 grid-column，结果子项堆在左上角、fr 单位不生效、grid-template-areas 完全被忽略。
子网格的 grid-template-columns 和父网格无关，不能靠“继承”对齐。想视觉对齐列，得手动用 grid-column: 2 / 4 指定轨道号，而不是指望它自动贴合外层第 2 列。
立即学习“前端免费学习笔记（深入）”；
- 每级需要网格行为的容器，都必须单独写
display: grid或display: inline-grid -
grid-template-areas只作用于直系子元素，孙子级写区域名会无效或报错 - 子网格需有明确尺寸（如
height: 300px或由内容撑开），否则行/列可能不渲染
subgrid 能复用父网格线，但 Safari 还不支持
subgrid 是唯一能让子网格真正“对齐”父网格轨道的方式，比如让内层评论头像和外层用户名列严格对齐。但它目前仅 Chrome 117+、Firefox 111+、Edge 117+ 支持，Safari 完全未实现（截至 2026 年 6 月）。
不用 subgrid 时，只能手动对齐：外层定义 grid-template-columns: 1fr 3fr 1fr，内层也写同样结构，并用 grid-column: 2 显式指定占用中间列。一旦响应式断点调整外层列数，内层必须同步改，否则错位。
- 生产环境慎用
subgrid，除非已明确用户浏览器范围 - 降级方案：用
minmax()+auto-fit让子网格自适应，比固定列数更健壮 - 调试时打开 Chrome DevTools 的 “Layout” 面板，勾选 Grid Overlay，看轨道是否真对齐
深层嵌套影响性能，3 层以上建议降级为 Flex
Chrome Layers 面板里出现大量重叠的 “Grid Overlay”，滚动卡顿、resize 响应迟滞，尤其在 Safari 中更明显——这不是 bug，是当前渲染引擎对多层 grid layout 的真实计算开销。
超过 3 层嵌套时，Grid 的维护成本和性能代价开始超过收益。此时更推荐外层用 Grid 划分主区域（如评论列表容器），内层用 Flex 布局单条评论及其回复项，既保持语义清晰，又避免渲染压力。
- 移动端热区必须 ≥ 44px，禁用双击缩放：
-webkit-user-scalable=no - 引用线用伪元素 + 绝对定位，别用 border-left 拉长线——嵌套深了容易错位
- 高度动画别用
height，改用max-height或transform: scaleY()
