移动端嵌套超三层应弃用后代选择器，改用data-depth属性解耦结构与样式；菜单点击需stopPropagation隔离冒泡；动画仅用transform/opacity防CPU渲染；BEM命名确保样式作用域独立。
移动端嵌套层级一深过三层，就别指望靠 margin/padding + 类名嵌套硬扛了——性能掉帧、事件错乱、样式失效是必然结果，不是“可能”。
为什么 data-depth 比 .comment .comment .comment 更可靠
DOM 异步加载、局部刷新、排序重排会让后代选择器瞬间失灵；.comment .comment .comment 这种写法在 React/Vue 里极易因 wrapper 节点增删而崩掉。用 data-depth 属性则完全解耦结构与样式逻辑：
- HTML 中直接写
<div class="comment" data-depth="4">，不依赖父级是否存在 - CSS 写
[data-depth="4"] { margin-left: 80px; }，浏览器匹配快（只查属性，不回溯祖先） - JS 动态插入新评论时，只需设置
el.dataset.depth = depth，无需操作 class 名或 DOM 层级 - 避免触发 IE11 或旧版 WebView 的深层选择器性能陷阱（虽已淘汰，但政企系统仍存）
嵌套菜单点击失效？先看 event.stopPropagation() 加在哪
第三级菜单点不开，90% 是因为点击冒泡没隔离，导致父级收起逻辑被连带触发。不是 z-index 不够高，也不是定位错了：
- 不要在
document上统一监听 click，改用委托到具体菜单根节点：menuEl.addEventListener('click', handler) - 在每一级子菜单的
handler里必须加event.stopPropagation()，且放在最开头 - 用
event.target.closest('.menu-item')判断点击的是哪一级，再决定展开/收起谁，不递归影响祖先 - 子菜单容器用
position: fixed，不用absolute——软键盘弹起、地址栏收放会导致getBoundingClientRect()计算偏移失准
嵌套动画卡顿？逐层检查是否只动 transform 和 opacity
嵌套越深，浏览器越难升层。只要任意一层用了 top、height、box-shadow 或 JS 读取 offsetTop，整条子树都可能退回到 CPU 渲染：
立即学习“前端免费学习笔记（深入）”；
- 位移必须用
transform: translateX(20px)，禁用left: 20px+position: relative - 缩放/旋转合并进同一个
transform值：transform: scale(0.95) rotate(2deg)，别拆成多条声明 -
will-change: transform必须按“正在动的那层”动态加：JS 在touchstart后立刻加.item.is-active，动画结束监听animationend并 setTimeout 兜底移除 - 验证是否真走 GPU：打开 Chrome DevTools → Rendering → 勾选 “Paint flashing” 和 “Layer borders”，绿色边框必须出现在每一层动画元素上
BEM 命名不是为了好看，是为防止 class 被意外覆盖
嵌套结构中，.form .group .field .label 这类选择器权重低、易被第三方库或 inline style 覆盖；BEM 强制每个样式锚定在单一 class 上，本质是把作用域显式写进名字里：
- Block 独立可识别：
search-form，不能叫top-search（含位置）或red-button（含颜色） - Element 显式归属：
search-form__submit，不是search-form__group__submit（禁止嵌套 Element） - Modifier 描述 Block 状态：
search-form--disabled，不是search-form__submit--disabled（状态属于表单整体） - 所有 Element 必须显式携带 Block class：
<button class="search-form__submit">，否则 JS 查询querySelector('.search-form__submit')可能漏节点
真正难的不是写对某一层样式，而是当别人在你封装好的 user-card 外面包了一层 <div class="modal-body">，你的缩进、动画、点击区域还能否照常工作——这取决于你从第一行 HTML 就有没有放弃对 DOM 结构的隐式依赖。
