直接搜block__element--modifier能秒定位源文件，因BEM类名自带模块、角色、状态三重上下文，配合编辑器全字匹配与大小写敏感，可精准锁定目标，避免传统命名的语义猜测与全局筛选。
直接搜 block__element--modifier 能秒定位到源文件，前提是命名没破规、构建没抹掉原始类名、编辑器开了全字匹配。
为什么 Ctrl+F 搜 card__title 比搜 title 快 10 倍
因为 BEM 类名自带上下文，card__title 不会和 header__title 或 user-profile__title 冲突。传统命名靠猜语义、靠全局扫再人工过滤，BEM 把“属于哪个模块”“是什么角色”“当前什么状态”全锁进一个字符串里。
- VS Code 搜索时务必勾选 Match Case 和 Whole Word，否则
card__title可能被card__title--highlighted或my-card__title干扰 - 禁用正则模式（除非你明确要查
card__.*--active这类变体），BEM 的连字符结构天然适合字面量精确匹配 - 如果项目用了 CSS Modules，搜索目标得是编译后的真实类名，比如
Card_title__abc123；但开发阶段仍可搜源码里的card__title，只要构建工具保留了localsConvention: 'camelCaseOnly'
搜不到？先检查这三处硬性断点
BEM 搜索失效，90% 不是命名问题，而是链路某环被截断。
-
source map没开或失效：Webpack 需设devtool: 'source-map'，Vite 默认开但可能被css.preprocessorOptions覆盖；DevTools 里 Styles 面板点类名旁的文件链接若点不动，基本就是它 - 构建压缩误删修饰符：Vite + cssnano 可能合并
btn btn--primary btn--disabled成btn btn--primary，需在 cssnano 配置中禁用mergeLonghand和reduceTransforms - 类名被框架转义或拦截：Vue 的
v-bind:class或 React 的className={...}若用字符串拼接，容易漏空格或引号；推荐用数组写法：className={['card__body', 'card__body--expanded']}
怎么让搜索结果不漏掉嵌套元素和动态类名
Element 和 Modifier 是 BEM 的搜索主干，但它们常被 JS 动态增删，或藏在预处理器嵌套里，导致静态搜索盲区。
立即学习“前端免费学习笔记（深入）”；
- Modifier 类名必须带完整前缀：
card__button--primary不能简写成card__button-primary，否则--primary会被当成普通单词切分，搜primary就满屏噪音 - Sass/Less 编译后类名不变，但别信嵌套语法本身——
.card { &__header { &--large { ... } } }输出仍是.card__header--large，搜索照旧有效；真正危险的是混用后代选择器，比如.card { .card__header { ... } }，这种写法产出的是.card .card__header，根本不在 BEM 搜索路径上 - JS 控制的开关类（如
is-open）不属于 BEM，硬套modal--is-open只会让搜索词膨胀且无业务意义；这类应单独管理，或用 data 属性替代，避免污染 BEM 主干搜索空间
最常被忽略的其实是 block 名和文件系统的对齐——搜 SearchBar__input 却找不到，往往是因为组件文件叫 search-bar.vue，但样式文件却放在 components/common/input.css 里。BEM 搜索不是靠规则，是靠命名与物理路径的硬绑定。
