嵌套深度限制不能强制规范BEM层级，真正起作用的是&拼接、@use隔离和BEM命名约束的组合校验；max-nesting-depth:3拦不住BEM错误，因合法嵌套仍可能生成含空格的后代选择器。
嵌套深度限制本身不能强制规范BEM层级，它只是暴露问题的探测器；真正起作用的是配合&拼接、@use隔离和BEM命名约束形成的组合校验。
为什么max-nesting-depth: 3拦不住BEM写错
Sass 的 stylelint-config-sass-guidelines 设为 max-nesting-depth: 3 只能阻止缩进超过三层，但拦不住这些合法却错误的写法：
-
.card { .title { } }—— 编译出.card .title，违反 BEM 元素必须用__连接的约定 -
.card { &__header { .icon { } } }—— 嵌套两层，但.icon实际编译为.card__header .icon，又退化成后代选择器 -
.btn { &:hover { .label { } } }—— 合法三层，但.label不属于按钮语义，是 DOM 位置依赖
这类写法通过了深度检查，却让 BEM 名称失效、组件无法脱离上下文复用。
& 拼接必须显式出现在每一级 BEM 元素中
BEM 的本质是类名拼接，不是视觉缩进。要让嵌套真正服务于 BEM，& 必须紧贴修饰符或元素符号，且中间不能有空格：
- ✅ 正确：
.card { &__title { color: #333; } &--featured { background: gold; } }→ 编译为.card__title和.card--featured - ❌ 错误：
.card { .title { } }→ 编译为.card .title，权重高、无封装、不可移植 - ⚠️ 危险：
.card { &__header { .title { } } }→ 编译为.card__header .title，第二层又掉回后代选择器
只要某一层没用 &，就等于主动放弃 BEM 封装，嵌套深度再浅也没意义。
用 @use + 文件拆分把 BEM 边界物理固化
单靠嵌套规则无法防止跨组件污染，必须靠模块系统把 BEM 块限定在文件内：
- 每个组件一个 Sass 文件（如
_card.scss），根选择器只写一个块名：.card { ... } - 在入口文件用
@use "card" as card，不加as *，避免变量/mixin 全局泄露 - 禁止在
_card.scss里写.page .card或article .card—— 那是布局层的事，应由_layout.scss通过@use引入后组合
这样，当某个开发者想给 .card 加第四层嵌套时，会立刻发现：没地方写了——父级块不在当前文件，& 没东西可拼，@use 又不许跨模块引用样式。
真正的规范点不在嵌套深度，而在编译后 CSS 是否出现空格
最简单有效的自查方式：打开编译后的 .css 文件，搜索空格。所有 BEM 类名之间都不该有空格：
- 允许：
.card__title、.card--dark、.card__title:hover - 禁止：
.card .title、.card .header .title、.card__header .title
一旦发现空格，说明某处漏了 &、多了缩进、或用了标签/属性选择器。这时候删掉嵌套、改用单类名，比补一层 & 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
