BEM命名使搜索“零噪音”：如搜card__title只命中卡片标题，避免语义冲突；需开启VS Code全字匹配与大小写敏感，禁用正则，确保source map和构建配置正确。
直接搜 block__element--modifier 能秒定位到源文件，前提是命名没破规、编辑器开了全字匹配、构建没抹掉原始类名——BEM 本身不加速搜索，它让搜索结果“零噪音”。
VS Code 里搜 card__title 为什么比搜 title 快 10 倍
BEM 类名把模块（card）、角色（__title）、状态（--highlighted）锁进一个字符串，天然避免语义冲突。搜 title 会命中 header__title、user-profile__title、甚至第三方库的 toast-title；而搜 card__title 只返回真正属于卡片组件的定义。
- 必须勾选 Match Case 和 Whole Word，否则
card__title--large会被card__title模糊匹配干扰 - 禁用正则模式（除非你明确要查
card__.*--active这类变体），BEM 的连字符结构更适合字面量精确匹配 - 如果用了 CSS Modules，开发时仍可搜源码里的
card__title，但上线后得查编译后的Card_title__abc123——确保构建配置保留localsConvention: 'camelCaseOnly'
搜不到 header__nav？先检查这三处硬性断点
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']}
为什么 .card__button--primary 不能简写成 .card__button-primary
双短横 -- 是 BEM 的语法分隔符，不是视觉装饰。写成 card__button-primary 会让编辑器和人眼都误判为另一个元素（比如 card__button-primary-icon），搜 primary 就满屏噪音；而 card__button--primary 中的 --primary 是独立修饰符，搜它只会命中该状态。
立即学习“前端免费学习笔记（深入）”；
- Modifier 必须依附于完整结构：只能是
card--disabled或card__button--primary，禁止card--primary（脱离 element）或card__button--primary--large（嵌套 modifier） - Sass 中写
&--disabled { opacity: 0.5; }前，父选择器必须已声明.card__button，否则编译后规则无效 - JS 动态增删类时，务必保证基础类始终存在：
class="card__button card__button--primary"，而不是只加card__button--primary
真正卡住搜索进度的，往往不是类名写得像不像 BEM，而是你有没有在编辑器里养成「全字匹配 + 区分大小写 + 关闭正则」这一串肌肉记忆。BEM 只是让这串动作不漏结果，不是帮你省掉动作本身。
