应使用CSS变量与data-level属性实现楼层缩进：定义--indent-base并用calc计算各层缩进，配合伪元素绘制连续左侧边框，移动端通过@media调整变量值。
用 margin-left 实现楼层缩进，但别只加数值
直接写 margin-left: 20px 看似简单，实际会崩：嵌套深了缩得太宽、响应式下挤出横向滚动条、不同设备显示不一致。真正可靠的做法是用层级变量控制缩进基数，比如定义 --indent-base: 16px，再让每层按 calc(var(--indent-base) * (n - 1)) 计算——这样第1层0px、第2层16px、第3层32px，逻辑清晰且可维护。
常见错误是把缩进写死在元素上，比如给 .reply-level-3 写死 margin-left: 48px。一旦中间插入新层级，所有后续类名和样式都要改。应该用属性选择器或数据属性驱动，例如：[data-level="3"] { margin-left: calc(var(--indent-base) * 2); }
左侧边框连线要用 border-left，但得避开塌陷和断连
很多人直接给每层加 border-left: 2px solid #ccc，结果发现：顶层没线、中间线断开、回复末尾线还悬着。根本原因是边框默认从元素顶部开始画，而楼层之间有 margin 或 gap，视觉上就断了。
解决方案是统一用伪元素画线，确保连续：
立即学习“前端免费学习笔记（深入）”；
blockquote::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 8px;
width: 2px;
background: #ddd;
}关键点：
-
left值要和margin-left的起始对齐，否则线偏移 - 必须设
position: relative在父容器上，否则::before定位失效 - 如果楼层用了
display: flex，记得加align-items: flex-start，不然伪元素可能被截掉
楼层深度怎么传给 CSS？data-level 比 class 更灵活
后端渲染时容易只靠 class 名如 reply-lv2 控制样式，但前端 JS 动态插入回复时，class 很难同步更新层级。用 data-level 属性才是通用解法。
使用场景：
- PHP/Node 渲染模板时直接输出
<div data-level="3"> - JS 追加回复时，根据父节点的
data-level自动算出新值：newLevel = parseInt(parent.dataset.level) + 1 - CSS 里用属性选择器精准匹配：
[data-level="4"] { margin-left: calc(var(--indent-base) * 3); }
注意：data-level 必须是纯数字，别写成 "level-4"，否则 CSS 无法做数值计算，JS 解析也容易出错。
移动端缩进太挤？用 @media 重置 --indent-base 就行
PC 上 16px 缩进合适，手机屏一缩就只剩半行字。别写两套 class，直接在媒体查询里改 CSS 变量：
@media (max-width: 768px) {
:root {
--indent-base: 12px;
}
}这样所有依赖它的缩进和边框都会自动收缩，不用重复写 margin-left 覆盖规则。性能也更好——浏览器只需重算变量，不触发重排。
容易踩的坑：
- 在
@media里漏写了:root，导致变量没生效 - 用了
em或rem当缩进单位，结果字体大小一变，缩进跟着乱跳 - 边框颜色没随主题切换，深色模式下灰线看不见，得配合
prefers-color-scheme一起调
层级越深，变量和属性驱动的优势越明显；手写一堆 class 和 margin 值，三天后自己都看不懂哪层对应哪条线。
