scss中&__title搜不到对应css类名，因其编译为.block .block__title（带空格后代选择器），而非单类名.block__title；必须用@at-root #{&}__title强制提级生成无空格扁平类名，确保编辑器搜索、工具链识别和浏览器匹配一致。
SCSS里&__title为什么搜不到对应的CSS类名
因为&__title在SCSS中默认编译成.block .block__title（带空格的后代选择器），而你在CSS文件里实际想找的是.block__title这个单类名。编辑器全文搜索block__title时，根本匹配不到被嵌套“污染”后的输出结果。
真正能被搜索到的BEM类名必须是单类名输出
浏览器只认.block__element这种形式，BEM工具链（stylelint、VS Code高亮、构建提取逻辑）也全靠它做正则识别。一旦输出变成.block .block__element，就等于主动断掉所有自动化能力。
- 用
@at-root #{&}__title强制提级：确保编译后只有.block__title，没有空格 - 块名是变量时：
$block: "search-form"; @at-root #{$block}__input { }→ 输出.search-form__input - 禁止在
&:hover、&.is-open或子容器内写&__xxx，否则必然产出非法后代选择器
全文搜索失效的常见翻车点
你以为在写BEM，其实编辑器和构建工具已经“看不见”你写的类了。
-
.card { .header { &__title {} } }→ 输出.card .header__title，card__title压根没生成 -
.sidebar .widget { &__item {} }→ 输出.sidebar .widget__item，但BEM只认.widget__item - 用
emmet.bem插件生成HTML类名（如btn__text），但SCSS里没对应规则，CSS里自然搜不到
让搜索真正可用的最小闭环
不是“写了就能搜”，而是从写法、编译、校验三端对齐。
- SCSS中所有
__和--必须由@at-root #{&}或显式变量拼接生成 - 启用
stylelint-selector-bem-pattern，配置ignoreSelectors: [/:hover/, /:focus/]，让它在CI阶段报错非法拼接 - VS Code装Highlight插件，加正则
"(\w+)__(\w+)"高亮__部分——能被高亮，才说明编辑器识别了这是BEM语义分隔符
__，而取决于它最终是否以独立、无空格、无上下文依赖的形式落在CSS文件里。任何嵌套层级、伪类包裹、父子选择器混用，都会让这个链条断裂。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
