能直接跳转到源码文件，前提是构建链路没断、类名没被压缩或转义；chrome devtools中点不动css链接90%因source map未生效，vite默认开启但可能被css.preprocessoroptions覆盖，webpack需显式设devtool: 'source-map'，且仅开发环境有效。
能直接跳转到源码文件，前提是构建链路没断、类名没被压缩或转义——不是BEM本身有多神奇，而是它把路径线索锁进了类名里。
Chrome DevTools 里点不动 CSS 文件链接？先查 source map 是否生效
点不了 Styles 面板里类名旁的 header.css:12 这种链接，90% 是 source map 没生效。Vite 默认开启，但若你配了 css.preprocessorOptions（比如用了 Sass），可能意外覆盖掉默认配置；Webpack 则必须显式设 devtool: 'source-map'。
- 验证方式：打开 DevTools → Elements → 选中一个带 BEM 类的元素 → 右侧 Styles 面板里找类名左侧的文件名，能点击跳转才算有效
- 线上环境通常关 source map，所以这招只适用于开发或预发环境；生产环境得靠其他手段
- 如果用的是 CSS Modules，source map 仍指向原始
.module.css文件，不是编译后哈希名
全局搜 card__header--sticky 却没结果？检查三处硬性断点
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)}
为什么搜 header__logo 比搜 logo 快 10 倍？关键在编辑器设置
VS Code 里搜 BEM 类名，不是输得快，而是匹配得准。
- 必须勾选 Match Case 和 Whole Word：否则
card__title会被card__title--large或my-card__title干扰 - 禁用正则模式：BEM 的
__和--是字面量分隔符，正则反而引入歧义；真要查变体（如所有card__*），再开正则也不迟 - 搜
card__button--primary就输全名，别图省事搜primary——后者会命中所有含primary的类、变量、注释，噪音极大
线上页面看不到 BEM 类名？可能是构建抹掉了原始名
生产环境看不到 card__body，只看到 Card_body__abc123，这不是 BEM 失效，而是 CSS Modules 的正常行为。
- 开发阶段仍可搜源码里的
card__body，只要构建工具保留localsConvention: 'camelCaseOnly'（Webpack/Vite 默认） - 上线后若需调试，得搜编译后的哈希名；但更靠谱的方式是：用 DevTools 的 Computed 面板搜属性值（比如
padding），再点箭头溯源到那条规则，看它来自哪个文件和行号 - 真正危险的是类名被框架或脚本动态改写：比如某些 UI 库会把
class="button button--loading"改成class="button loading"，破坏 BEM 结构——这时就得查 JS 层逻辑，而不是盯 CSS
最常被忽略的一点：BEM 能定位的前提，是 HTML 里真有那个类。很多人改完 CSS，却忘了同步更新模板里的 class 属性，或者 JS 动态增删 class 时漏写了基础块名（比如只加 card--expanded 却没保留 card），结果 DevTools 里压根看不到这个类——它根本没上 DOM。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
