原生CSS嵌套超3层会显著增加浏览器匹配开销，因仍遵循从右往左匹配规则，导致DOM节点多时CPU消耗剧增；应避免纯结构路径选择器，用:where()/:is()降权简化，优先采用BEM命名解耦，并配置Stylelint customSyntax检测嵌套深度。
原生CSS嵌套层级超过3层时，浏览器匹配开销会明显上升
原生CSS嵌套（@container、@layer 之外的 & 嵌套）仍遵循从右往左匹配规则。比如 .card .card__body .card__title h2，浏览器先找所有 h2，再逐层向上验证父级是否存在。DOM节点越多、重绘越频繁（如长列表滚动），这个回溯过程就越吃CPU。
实测显示：4层嵌套在低端Android设备上，Recalculate Style 时间可比单类名慢3倍以上；5层时部分WebView甚至出现样式延迟渲染。
- 立即检查项目中是否存在
div ul li a、.layout .sidebar .nav .item .link这类纯结构路径选择器 - 用DevTools的“Coverage”面板扫描未使用的选择器，重点过滤含3个及以上空格的选择器
- 禁用所有
@import，改用<link rel="stylesheet">并行加载——否则嵌套规则可能因阻塞而延迟解析
用 :where() 和 :is() 替代多层后代选择器
原生嵌套容易让开发者误以为“缩进=作用域”，结果写出 .modal .modal__content .modal__header h1 这种冗余链。其实 :where() 能把权重归零，:is() 支持简写多个选择器，且不提升特异性。
例如把 .article .article__body .article__section h2 改成：
立即学习“前端免费学习笔记（深入）”；
:where(.article__section) h2 {
font-size: 1.5rem;
}这样既保留语义，又避免权重累积，后续用 .article__section--featured h2 覆盖也无需 !important。
-
:where()内部选择器权重全部归零，适合重置或基础样式 -
:is(.btn, .link, .cta)比写三遍规则更紧凑，且兼容性已覆盖 Chrome 100+/Safari 15.4+/Firefox 100+ - 别在
:where()里嵌套伪类：:where(.btn:hover)无效，应写成.btn:where(:hover)
SCSS/Less用户别依赖 @at-root 救火，优先重构为BEM类名
@at-root 确实能提级输出，但它解决的是“编译时拼接失控”，不是“设计层面耦合”。比如你在 .dialog 块里写 @at-root .u-text-center { text-align: center; }，看似解耦，实则把工具类硬塞进组件文件，破坏关注点分离。
真正可持续的做法是放弃“模拟DOM结构”的嵌套惯性，直接用BEM命名表达功能边界：
- 把
.card { .card__body { h3 { color: var(--text-primary); } } }改为.card__title { color: var(--text-primary); } - 块名必须带业务语义：
product-card✅，card❌（易冲突） - 元素名禁止跨层：
product-card__header__logo❌，应拆成product-card__header+header-logo两个独立块
这样改完后，哪怕把 <div class="product-card__title"> 移到页面任意位置，样式依然生效——这才是解耦的本质。
Stylelint必须配 customSyntax 才能检测原生嵌套深度
max-nesting-depth 规则默认只识别纯CSS中的 @media、@supports 和伪类，对原生嵌套（如 .a { .b { color: red; } }）完全不计数。想让它生效，必须显式声明语法解析器：
export default {
customSyntax: 'postcss-less', // 或 'postcss-scss'
rules: {
'max-nesting-depth': [3, { ignore: ['at-rules'] }]
}
};漏掉 customSyntax 的后果是：规则静默失效，CI里永远不报错，团队继续写出4层嵌套。
- 如果项目混用SCSS和原生嵌套，
customSyntax必须设为postcss-scss，否则&嵌套不被识别为深度增加 -
ignore: ['at-rules']很关键——允许@media不计入深度，否则响应式写法会被误伤 - 别用
/* stylelint-disable max-nesting-depth */跨行注释，它只禁用当前行；多行嵌套请用/* stylelint-disable-next-line */放在块上方
最常被忽略的是：原生嵌套本身不产生运行时开销，但生成的长选择器会。控制深度不是为了“让Sass编译快”，而是防止产出浏览器执行慢的CSS。
