嵌套超3层会生成冗长后代选择器，导致性能下降和样式覆盖困难；应优先用&拼接、>子选择器、%placeholder及BEM规范控制选择器权重与语义。
为什么嵌套超过3层就生成冗长选择器
Sass嵌套本身不“智能”，它只是把&替换成上一层选择器字符串，再按空格拼接。一旦嵌套超3层，比如.layout { .sidebar { .nav { .item { a { } } } } }，编译结果就是.layout .sidebar .nav .item a——5级后代选择器，权重0-5-0，浏览器匹配时要从a往左查4次父级，Lighthouse直接报“Avoid overly specific selectors”。这不是写法丑，是真实性能瓶颈。
常见错误现象：!important越来越多、DevTools里样式被意外覆盖、修改一个.title颜色却要加两层!important才生效。
- 用VS Code按住
Ctrl点击编译后的CSS文件，直接看生成结果——别靠缩进猜 - 检查
&前有没有空格：有空格就是后代选择器（冗长），没空格才是BEM式拼接（短） - 禁用ID选择器：哪怕只写一次
#header { .nav { } }，编译后就是#header .nav（权重0-101-0），后面加10个class都压不住
用&拼接代替空格嵌套
&不是“当前块的父级”，而是“上一层选择器字符串”。误用空格会让&指向错层，反而产出更长的选择器。
错误写法：.card { .header { &__title { } } } → 编译出.header__title（&指向.header，丢失.card上下文）
立即学习“前端免费学习笔记（深入）”；
正确写法：.card { &__header { &__title { } } } → 编译出.card__header__title（纯BEM，无空格，权重仅0-1-0）
- 想保留外层上下文但又不想多层
&？用变量暂存：$block: ".card"; #{$block}__title { color: red; } -
&:hover &__text比&:hover .btn__text更安全——前者输出.btn:hover .btn__text，语义对、权重不跳变 - 兄弟关系也一样：
.card { & + & { margin-top: -1px; } }→.card + .card，不引入额外父级
用>子选择器切断继承链
后代选择器（空格）让样式过度耦合DOM结构；>明确限定只作用于直接子元素，编译后选择器更短、权重更低、更易覆盖。
把.card { .header { h1 { } } }改成.card { > .header { > h1 { } } } → 输出.card > .header > h1，而非.card .header h1。
- 适用场景：组件根元素下必须严格控制层级的结构，比如表单字段组、卡片头部区域
-
>在IE8+完全支持，无需兼容顾虑 - 不适用于需要穿透多层的逻辑（如模态框内所有按钮统一主题），此时应改用类名或
data-属性控制
用%placeholder收敛重复声明
@extend不是万能钥匙，滥用会爆炸式增长选择器列表；%placeholder才是安全路径——它不输出CSS，只在@extend时内联合并声明。
错误示范：.list .item .badge { @extend %flex-center; } → 编译出.list .item .badge { display: flex; }（权重0-3-0）
正确做法：.list__item--with-badge { @extend %flex-center; } → 权重仅0-1-0，且语义明确
-
%必须以%开头声明，且不能出现在嵌套规则内部（如.card { .title { @extend %heading; } }是危险操作） - 必须被至少一个
@extend调用，否则编译后彻底消失 - 新版Dart Sass(v7.0+)默认禁用跨文件
@extend，必须用@use显式导入，否则报Undefined placeholder selector "%xxx"
{前问一句：这个层级，是业务语义必需的，还是仅仅因为“HTML里它就在里面”？BEM的__和--是边界线，跨过去就得拆模块，不是加嵌套。 
