嵌套层级超过3层必须重构，应删除最内层嵌套改用单类名；仅允许&__element、&--modifier和&:hover三类写法；禁用含空格的选择器；@at-root用于媒体查询提级；组件需独立文件且根选择器为块名。
嵌套层级超过3层时必须重构，不是补&而是删掉最内层
浏览器匹配选择器是从右往左的，.page .main .content .card .title这种5层写法会让它先找所有.title，再逐层向上验证父级——DOM越复杂，渲染越慢。Lighthouse报“Avoid overly specific selectors”，根源就在这儿。
4层是性能拐点：权重暴增（每多一层+10）、DevTools里规则被折叠、后续覆盖只能靠!important硬顶。Sass官方推荐嵌套不超过3层，超了就得重构。
- 立即删掉最内层嵌套，比如
.card { &__header { &__title { } } }→ 改成.card__title单类名 - 别用
&去“抢救”深层结构，它只认最近一层父选择器，.card { .header { &__title { } } }会编译出.header__title，语义全错 - 想保留外层上下文？用变量更可靠：
$block: ".card"; #{$block}__title { color: red; }
只允许&__element和&--modifier两种&写法
&不是“自动拼前缀”，只是原样替换上一层选择器字符串。一旦有空格，就变成后代选择器；没空格才是BEM要求的扁平拼接。
常见翻车点：.btn { &:hover { &__icon { } } }编译出.btn:hover .btn__icon，含空格，违背BEM扁平性，也拖慢渲染。
- 安全写法仅三类：
&__element（如.card { &__title { } }→.card__title）、&--modifier（如.card { &--featured { } }→.card--featured）、&:hover等伪类（但必须配合JS切换类名，不能纯靠DOM推导） - 禁用：
& .child、& > *、&__item a、&__item p——这些都会产出带空格的选择器或破坏原子性 - 修饰符必须绑定到块本身：
.card--large .card__header才对，.card__header--large无法组合多个修饰符
用@at-root主动切断嵌套链，而不是靠缩进猜上下文
嵌套里写@media或:not()时，很容易把选择器权重悄悄拉高。比如.card { @media (max-width: 768px) { &__title { } } }会编译出.card @media… .card__title，实际无效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
正确做法是用@at-root提一层，让媒体查询平级输出：
.card {
&__title {
color: blue;
@at-root (with: media) {
@media (max-width: 768px) {
color: red;
}
}
}
}
-
@at-root让规则脱离当前嵌套层级，避免权重膨胀 - 子选择器
>比后代选择器（空格）更可控：.card > .header > h1比.card .header h1更短、权重更低、更易覆盖 - 伪类逻辑要提前约定：按钮悬停态不写
&:hover，而用&--hover，由JS控制类名切换
组件拆分比嵌套更重要，每个_xxx.scss文件根选择器必须是块名
Sass嵌套本身不等于模块化，真正起作用的是嵌套 + BEM命名 + 文件拆分 + 作用域控制的组合。把所有样式塞进一个base.scss里，再怎么嵌套都是假模块化。
常见错误：写成article .card h2 { }，导致样式无法复用到section .card；或用ul li a绑定标签名，HTML换成nav就全失效。
- 每个组件单独建文件，如
_card.scss，根选择器必须是.card，内部只允许出现&__xxx和&--xxx - 元素和修饰符必须直属于块名，禁用
.card > .content > .card__title这类穿透式写法 - 状态类必须手动加到HTML上：
<button class="btn btn--disabled"></button>，而不是靠.btn:disabled或父级推导
BEM的原子性不是靠&实现的，是靠人工检查编译后的CSS：搜索空格、确认修饰符独立存在、验证元素类能否单独使用——这些步骤跳过，嵌套再规范也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
