深层嵌套导致CSS变慢，因浏览器从右往左匹配时回溯成本随层级增加而剧增，5层以上在旧版浏览器中易引发渲染卡顿；%placeholder通过@extend内联复用样式减少体积和选择器复杂度，但需避免跨文件误用及动态类名扩展。
深层嵌套写法为什么会让CSS变慢
深层嵌套（比如 .a .b .c .d .e { ... }）本身不报错，但浏览器匹配时要从右往左逐级回溯，层级越深，回溯成本越高。Sass编译后生成的CSS如果大量出现5层+选择器，尤其在老版Chrome或移动端WebView里，渲染卡顿会明显——这不是“写法不优雅”的问题，是真实性能损耗。
常见错误现象：stylelint没报错，但用DevTools → Rendering → Paint flashing一开，滚动时大片区域高频重绘；或者用Lighthouse测出“Avoid overly specific selectors”警告。
- 嵌套超过4层就该警惕，5层以上基本属于反模式
- Sass的
&嵌套只是语法糖，最终输出仍是普通CSS选择器，不改变浏览器匹配逻辑 - 组件级作用域（如Vue的
scoped或CSS Modules）能缓解，但无法根治嵌套过深带来的选择器膨胀
占位符选择器%placeholder怎么真正提升性能
%placeholder本身不输出CSS，只在@extend时被内联展开。它和class不同：不会产生冗余选择器链，也不会污染HTML结构。关键点在于——它能帮你把“重复样式声明”转成“单次定义+多处复用”，从而减少最终CSS体积和选择器复杂度。
使用场景：按钮变体、表单状态、卡片布局骨架等有固定样式组合的模块。
- 别对动态类名用
@extend %placeholder，比如.btn--这种带变量的，Sass不支持运行时扩展size -
@extend会合并选择器，如果两个规则都@extend %base，最终可能生成.a, .b { ... }，而非重复声明——这才是体积下降的核心 - 慎用
@extend跨文件，确保%placeholder定义在@import链上游，否则编译报错Undefined placeholder selector "%xxx"
示例：
%flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.card { @extend %flex-center; }
.modal { @extend %flex-center; }
// 编译后只有1段声明，而非2段重复flex代码
什么时候该放弃嵌套，改用BEM或实用类
当嵌套开始服务于“视觉位置”而非“语义关系”时，就该停手了。比如.header .nav .item .link:hover——这里.link的样式其实和它在.header里无关，纯粹是“这个链接悬停时要变色”，硬套嵌套只会让选择器越来越长，且难以复用。
参数差异很实际：BEM强制用.block__element--modifier扁平命名，直接切断嵌套依赖；utility-first（如Tailwind）则把样式原子化，flex items-center justify-center这类类名根本不关心父容器是谁。
- 团队协作中，BEM类名比嵌套更易grep定位，
git blame也更准 - 如果项目已用PostCSS插件（如
postcss-nested），注意它和Sass嵌套逻辑不兼容，混用会导致编译异常 - 实用类不是银弹：过度使用会让HTML类名爆炸，
class="p-4 bg-gray-100 rounded-lg text-sm font-medium hover:bg-gray-200"这种行写到80字符就该反思
编译后CSS体积和选择器 specificity 的隐性冲突
很多人以为@extend一定比@mixin省体积，其实不一定。@mixin会复制样式块，但@extend可能因合并选择器意外拉高specificity。比如.form .input:focus和.modal .input:focus都@extend %focus-state，最终可能生成.form .input:focus, .modal .input:focus { ... }——这个选择器specificity比单独写.input:focus高得多，后续想覆盖反而更难。
容易踩的坑：!important滥用往往就是specificity失控后的补救，而根源常是嵌套+extend组合拳打出来的“选择器肥胖症”。
- 用
Specificity Graph工具（如Chrome DevTools的Computed面板）查某个样式为何没生效，比猜更快 - 编译后用
cssnano或clean-css压缩前，先看原始CSS文件大小和最长选择器长度，比单纯盯Sass源码更有说服力 - 如果项目要求支持IE11，注意
%placeholder在旧版node-sass里可能触发Invalid CSS after "...": expected "}", was ";"，换dart-sass可解
深层嵌套和占位符都不是非此即彼的选择，真正卡住人的，往往是没想清楚“这段样式到底属于谁”——是组件内部的状态？还是跨组件复用的视觉模式？这个问题没答案之前，所有技巧都只是给坏设计打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
