能快速定位bem样式源码的前提是类名真实存在、source map有效且编辑器搜索配置正确；否则搜索card__header--sticky仅得干扰项，根本原因在于构建或运行时链路某环中断，而非bem失效。
能快速定位，前提是类名真实存在、source map 有效、编辑器搜索配置正确；否则搜 card__header--sticky 只会返回一堆干扰项，不是 BEM 不灵，是链路断在了某一处。
DevTools 里点不了 CSS 文件链接？先验证 source map 是否真生效
Styles 面板中类名旁的 header.css:12 点不下去，90% 是 source map 没起作用——Vite 默认开但可能被 css.preprocessorOptions 覆盖，Webpack 则必须显式设 devtool: 'source-map'，且仅开发环境有效。
- 验证方式：Elements → 选中带 BEM 类的元素 → Styles 面板找类名左侧文件名，能点击跳转才算有效
- 线上环境默认关 source map，这招只适用于开发或预发；生产环境得靠其他手段
- 若用 CSS Modules，source map 仍指向原始
.module.css，不是编译后哈希名
搜 card__body--expanded 却没结果？检查三处硬性断点
BEM 搜索失效，极少是命名写错，多是构建或运行时链路被截断：
-
cssnano压缩时合并了修饰符：比如把btn btn--primary btn--disabled合并成btn btn--primary，--disabled被删了；需在cssnano配置中禁用mergeLonghand和reduceTransforms - JS 动态拼接 class 出错：如
className={`card__body ${isExpanded ? 'card__body--expanded' : ''}`漏空格或引号，导致类名不完整，DevTools 里根本看不到该类 - 框架拦截：Vue 的
v-bind:class或 React 的className若用字符串拼接而非数组，容易出错；推荐写法：className={['card__body', isExpanded && 'card__body--expanded'].filter(Boolean)}
VS Code 搜不到？匹配设置比关键词更重要
搜 header__logo 比搜 logo 快 10 倍，不是因为输得快，而是匹配得准：
- 必须勾选 Match Case 和 Whole Word：否则
card__title会被card__title--large或my-card__title干扰 - 禁用正则模式：BEM 的
__和--是字面量分隔符，正则反而引入歧义；真要查变体（如所有card__*），再开正则也不迟 - 搜
input--disabled就输全名，别图省事搜disabled——后者会命中所有含disabled的类、变量、注释，噪音极大
Computed 面板里样式被划掉？重点不是“谁没生效”，而是“谁赢了”
BEM 类名本身权重恒为 0-1-0，所谓“没生效”，往往是另一条规则胜出：
- 在 Computed 面板搜目标属性（如
color），看哪条被划掉、哪条胜出；点击带小箭头的样式行，右键 → “Reveal in Sources” 直接跳转冲突源文件 - 高频罪魁：全局通配规则，比如
.theme-dark * { color: #666; }或body .card .title，它们用泛化选择器暴力覆盖 BEM 的精确类名 - 临时验证：在 DevTools 里手动禁用疑似冲突的 CSS 文件，看目标样式是否恢复；确认后立刻删或隔离这些规则
真正卡住排查进度的，从来不是“不知道怎么搜”，而是搜之前没确认类名是否真实输出、source map 是否就位、编辑器是否按字面量精准匹配——这三个环节漏掉一个，BEM 的定位能力就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
