&__element 会编译出后代选择器是因为 & 仅作字符串拼接，空格被原样保留；安全写法只有 @at-root #{&}__element 或手动写全名 .block__element，且修饰符必须与块同级、禁用嵌套后代写法。
为什么 &__element 会编译出后代选择器？
这不是 Sass 的 bug，而是 & 的行为本质：它只是字符串拼接，空格照单全收。写 .card { &__header { } } 看似省事，但若中间不小心混入空格（比如 VS Code 自动补全或复制粘贴带不可见字符），就会变成 .card { & __header { } }——编译结果是 .card .card__header，带空格，成了后代选择器，违背 BEM 扁平要求。
真正安全的写法只有两种：
-
@at-root #{&}__header：强制提级，确保输出.card__header - 手动写全名：
.card__header：彻底绕过嵌套歧义，最可控
尤其注意：修饰符必须和块同级，.btn { &:hover { &--active { } } } 会产出非法的 .btn:hover--active，浏览器直接忽略。
如何避免 card__header__title 这类三段式命名？
BEM 只允许 block__element 和 block--modifier 两种结构。card__header__title 实质是把 card__header 当作新 Block，但它只是 card 的一个 Element，不能承载子 Element。这种写法会导致样式静默失效、无法复用、DevTools 难以定位。
该拆还是该加 Modifier，只看一条标准：这个 UI 片段会不会在别处复用？
- 会复用 → 提为独立 Block：
heading、dropdown、list - 几乎不复用但强依赖容器 → 用 Modifier：
heading--in-card，而非card__header__title - 一次性弱场景 → 用 State 类：
class="heading is-subheading"或data-context="card"
HTML 可以嵌套很深，但类名不能跟着 DOM “滑动”。BEM 不要求 DOM 扁平化，只要求类名归属清晰。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
Sass 嵌套中哪些 & 用法必须禁用？
& 在 BEM 场景下极易翻车，因为它不校验语义，只做字符串替换。以下写法一律禁用：
-
& .child、& > *、& + *：产生后代/子代/相邻选择器，破坏 BEM 原子性 -
&__item a或&__item p：用标签绑定，HTML 换成nav就失效 -
.card { &__header { &--large { } } }：产出.card__header--large，语义错位（应是.card--large .card__header）
安全写法仅限三种：&__element、&--modifier、&:hover（且需配合 JS 切换类名，不依赖 DOM 层级）。
如何让 BEM 类名真正隔离、不冲突？
Sass 嵌套本身不生成命名空间，@import 后所有选择器仍平铺全局。哪怕写 .modal { .header { } }，编译后仍是 .modal .header，一旦其他模块也定义了 .header，就可能被覆盖。
真正强隔离的做法是加唯一前缀：
- 用项目/组件域前缀，如
.uikit-modal、.dash-card，避免泛化词（my-、custom-） - 配合
&写：.uikit-modal { &__header { } &__body { } }，编译出.uikit-modal__header等，天然隔离 - 用
@use替代@import，变量和 mixin 默认私有，防止跨文件污染
最后务必人工检查最终 CSS：grep -r " \." src/css/ 确认无空格选择器；验证 .card__body 单独加到任意节点是否仍生效；检查修饰符是否包含完整状态样式（颜色、指针、透明度等），而非只定义 hover 效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
