DOM嵌套层级应通过data-depth属性控制，避免类名嵌套；height动画改用max-height或transform scaleY；引用线用伪元素+绝对定位；移动端热区≥44px并禁用双击缩放。
树形结构的 DOM 嵌套层级怎么控制不爆炸
深层嵌套评论（比如 5 层以上）直接用 div 套 div，CSS 里写 .comment .comment .comment 这种选择器，很快就会失控：样式冲突、性能掉帧、调试时找不到对应节点。
- 用
data-depth属性代替类名嵌套，比如<div class="comment" data-depth="3">，CSS 里统一用属性选择器：[data-depth="3"] { margin-left: 60px; } - 避免用
:nth-child或:first-of-type控制缩进——这些依赖 DOM 顺序，而评论可能异步加载、局部刷新、排序重排 - 如果后端返回的是扁平化数组（带
parent_id），前端生成 DOM 时别硬拼嵌套结构；用 CSS Grid 的grid-template-columns+grid-column-start更可控
CSS 实现“折叠/展开”状态时，height 动画为什么卡顿
直接对 height 从 0 → auto 加 transition，浏览器无法计算中间帧，动画会跳变或卡死。
- 改用
max-height+ 固定上限值，比如max-height: 500px，再配overflow: hidden，动画就平滑了 - 但注意：500px 是硬编码上限，如果某条评论内容超长（比如贴了大段代码），会被截断。稳妥做法是 JS 测量真实高度后设为
max-height，再触发动画 - 更轻量的替代方案：用
transform: scaleY(0)→scaleY(1)，配合transform-origin: top，不触发重排，性能更好
多级回复的「引用线」（thread line）用纯 CSS 能画出来吗
能，但得放弃用 border-left 直接连到底——它无法绕过头像、规避折叠区域、也不支持箭头终点对齐。
- 推荐用伪元素 + 绝对定位：
.comment::before画竖线，.comment::after画小三角或圆点，通过top/left和data-depth动态计算位置 - 关键坑：父容器必须有
position: relative，否则绝对定位会相对于 body 偏移；另外要加z-index避免被头像或按钮遮住 - 如果评论支持编辑、删除后动态删节点，引用线容易错位——此时别依赖 DOM 顺序算位置，改用 JS 计算每个节点在树中的路径索引（如
[0,2,1]），再映射成 CSS 变量传进去
移动端下树形评论的点击热区和缩放适配问题
iOS Safari 对小于 44px 的点击区域会自动放大，但树形评论里头像、回复按钮、时间戳挤在一起，经常误触展开/收起，甚至触发双击缩放。
立即学习“前端免费学习笔记（深入）”；
- 给所有可点击元素（尤其是
.comment-toggle、.comment-reply-btn）加min-width: 44px和min-height: 44px，哪怕视觉上看起来小 - 禁用双击缩放：在
<meta name="viewport">里确保没有user-scalable=yes，同时加-webkit-tap-highlight-color: transparent - 缩进用
em或rem，别用固定px，否则字体放大后层级错乱；但注意：iOS 下rem在页面缩放时可能失效，保险起见用em基于父级 font-size
data-depth、max-height 和 em 值还在不在同一套逻辑里。 
