嵌套超3层会导致Sass生成过长后代选择器，引发性能与维护问题；应优先用BEM拼接、子选择器>、%placeholder、data属性和自定义属性控制长度，严格限制嵌套深度为3层。
嵌套超过3层时，Sass几乎必然生成过长的后代选择器（如 .layout .sidebar .nav .item a），这不是写法“不够优雅”的问题，而是浏览器匹配性能和维护成本的真实瓶颈。
为什么&嵌套会悄悄产出超长选择器
Sass 的 & 不是“当前上下文”，而是“父选择器字符串拼接结果”。一旦嵌套里再套嵌套，& 就只认最近一层，极易误生成冗余祖先链。
- 错误写法：
.card { .header { &__title { } } }→ 编译出.card .header .header__title（&指向.header，不是.card） - 正确写法：
.card { &__header { &__title { } } }→ 编译出.card__header__title（纯 BEM，无空格） - 检查关键点：看
&前有没有空格——有空格就是后代选择器，没空格才是 BEM 式拼接 - 媒体查询别用
&套：.btn { @media (min-width: 768px) { &--large { } } }会产出@media (min-width: 768px) { .btn--large }，但若父级已很长，.layout-main .sidebar .btn--large就失控了
用子选择器>代替空格，切断意外继承
后代选择器（空格）让样式过度耦合 DOM 结构；> 明确限定只作用于直接子元素，编译后选择器更短、权重更低、更易覆盖。
- 把
.card { .header { h1 { } } }改成.card { > .header { > h1 { } } }→ 输出.card > .header > h1，而非.card .header h1 - 适合场景：组件根元素下必须严格控制层级的结构，比如表单字段组、卡片头部区域
- 注意兼容性：
>在 IE8+ 完全支持，无需担心 - 不适用于需要穿透多层的逻辑（如模态框内所有按钮统一主题），此时应改用类名或自定义属性控制
用%placeholder替代深层嵌套复用，避免选择器复制爆炸
@extend 本身不压缩选择器长度，反而在多个上下文中被引用时，会机械拼接出所有组合（如 .modal .btn、.card .btn），而 %placeholder 能把重复声明收敛为单次输出。
立即学习“前端免费学习笔记（深入）”；
- 错误示范：
.card { @extend %flex-center; &__body { @extend %flex-center; } }→ 可能生成.card, .card .card__body两套规则 - 正确做法：对真正稳定、语义明确的基础样式用
%，例如居中、清浮动、隐藏文本；对动态结构（如.btn--sm）不用@extend - 必须确保
%flex-center定义在所有调用它的文件之前，且通过@use显式导入，否则编译报错Undefined placeholder selector "%flex-center" - 禁用跨模块
@extend：A 组件不该@extendB 组件的占位符，否则构建时依赖链不可控
用data-属性和自定义属性反向约束选择器长度
当嵌套已深到难以重构，就该考虑“绕开嵌套”——把语义从 DOM 层级移到属性上，让选择器回归扁平。
- 把
.user-card .info .name .highlight替换为[data-role="user-name"][data-state="highlight"]，长度从 40+ 字符压到 25 字符以内 - 配合 CSS 自定义属性统一控制值：
--text-highlight: #f00;，所有高亮文本用color: var(--text-highlight)，不再靠长选择器堆叠特异性 - 慎用伪类组合：
div ul li a:hover:focus:not(:disabled)应简化为a[data-role="user-link"]:hover，既短又可预测 - BEM 命名不是目标，而是手段：看到
.sidebar__list__item__link--active就该停住——这个--active修饰符本该属于.sidebar__link--active，说明结构设计已失焦
最常被忽略的一点：选择器长度问题往往在 DevTools 里看不见，只有打开 Rendering → Paint flashing 或跑 Lighthouse 才会暴露。等页面卡顿了再查，已经晚了。日常开发中，把 stylelint-config-sass-guidelines 的 max-nesting-depth: 3 当作硬边界，比事后优化管用得多。
