后代选择器超过4层应立刻停手，因浏览器从右往左匹配需逐层回溯验证父级，导致Recalculate Style耗时激增4倍以上且DOM微调即静默失效；应改用BEM语义化类名（如.card__title），将层级关系转译为类名结构，实现单次匹配与职责清晰。
为什么后代选择器超过4层就该立刻停手
浏览器匹配 CSS 是从右往左回溯的。.page .section .content .card .title 会让引擎先找所有 .title，再逐层向上验证父级是否存在。DOM 节点越多、JS 动态插入越频繁，Recalculate Style 时间越长——实测在中低端安卓设备上，5 层嵌套比单类名慢 4 倍以上。更麻烦的是，改一个中间容器（比如把 .content 换成 .main），整条规则静默失效，DevTools 里根本看不出问题。
直接用 .block__element 替代 .parent .child .grandchild
这不是加长名字，而是把 DOM 层级“翻译”成类名结构，让浏览器一次匹配到位。重构不是删 HTML，是把「位置关系」转译为「语义归属」：
-
.card是 Block，.card__title是它的 Element，哪怕它实际在 DOM 中嵌在.card__header里，也绝不写.card__header__title - Block 名必须带上下文：
.search-form✅，.form❌；.user-avatar✅，.top-avatar❌（禁用位置词） - Element 只能直属 Block：
.nav__item✅，.nav__list__item❌（BEM 明确禁止 Element 嵌套 Element）
& 和 @at-root 不是救命稻草，而是干扰源
Less/Sass 里写 .card { .header { &__title { } } }，编译出来是 .header__title，& 指向的是 .header，不是外层 .card——你本想拼 .card__title，结果丢了上下文。常见误用：
-
.modal { & .close { opacity: 0.5; } }→ 编译出.modal .close（多一层无意义后代，权重+1） -
@at-root不能给 4 层嵌套打补丁，它只解决被动嵌套（如第三方组件意外污染），不是主动设计的解法 - 真要用媒体查询或伪类，优先写平级规则：
@media (min-width: 768px) { .card--large { font-size: 18px; } }
什么时候该用 >，什么时候必须加 class
> 只控制深度，不保证语义。单独写 .card > p 仍可能命中多个无关段落；真正安全的是 .card > .card-title——子选择器 + 语义类名，才是最小可信赖单元：
立即学习“前端免费学习笔记（深入）”；
- 第三方 UI 库输出结构不可控时，硬靠
>锁定层级反而更脆弱（某天.modal > .dialog变成.modal > .wrapper > .dialog） - 服务端渲染或动态挂载的节点，
.parent > .child在初始渲染时可能无匹配项 - JS 操作时，
document.querySelector('.card-title')比遍历.card.children找第 2 个p更可靠
真正难的不是选中元素，是让每个类名自己就能说清“它是什么”。一旦开始写 div-2、item-first，你就已经在用位置代替语义——后续所有样式、JS、可访问性都得跟着 DOM 结构走，而不是业务逻辑。
