BEM命名（如header__logo--dark）明确标识样式归属，结合Chrome DevTools的Computed面板搜索color可快速定位生效规则，点击箭头跳转源码；禁用类、精准搜索、正确配置source map是高效调试关键。
因为BEM把样式归属关系直接编码进类名里，header__logo--dark这种名字一出现，你就知道它属于header块、作用于logo元素、处于dark状态——不用翻DOM结构、不猜选择器权重、不查继承链。
Chrome DevTools里搜color就能秒定哪条规则胜出
改了card__title--highlighted的color但没生效？别手动比对CSS文件。打开“Computed”面板，直接搜color，被划掉的是被覆盖的，没被划掉且带小箭头的那条就是最终生效规则，点击箭头能跳转到源码行。常见错误是另一条更具体的选择器（比如.card.is-expanded .card__title）权重更高，或者有!important压在别处——这些在“Computed”里一目了然。
实操建议：
- 按住
Ctrl（Windows）或Cmd（macOS）再点击“Styles”面板里的任意属性值，可快速定位该属性最终来源（含@import链） - 禁用某个BEM类？在“Elements”面板里直接取消勾选
card__body前的复选框，实时观察变化，比反复改代码快得多 - BEM类名带
--或__时，别用模糊搜索；搜input--disabled比搜disabled准，否则会命中button--disabled、form--disabled甚至注释里的TODO: disabled state
VS Code里搜card__title只返回真正相关的结果
搜title会命中header__title、user-profile__title、toast-title、甚至变量pageTitle；而搜card__title天然零噪音，只返回卡片组件的定义。前提是编辑器配置正确。
容易踩的坑：
- 没勾选
Match Case和Whole Word：会导致card__title匹配到card__title--large，干扰判断 - 开了正则模式却没意识到
.和*会跨字符匹配：BEM的__和--是字面量分隔符，直接输全名最稳 - 用了CSS Modules但搜源码名
card__title，线上却只看到Card_title__abc123：开发时搜源码没问题，上线后得确认构建配置是否保留localsConvention: 'camelCaseOnly'
source map点不动？90%是构建链路断在三处
DevTools里card__body旁的card.scss:42链接点不了，不是BEM失效，而是source map没生效。这和命名无关，纯属工程配置问题。
必须检查：
-
css.preprocessorOptions是否意外覆盖了Vite默认的source map配置（尤其用了Sass时） - Webpack是否显式设置了
devtool: 'source-map'（仅开发环境有效） - 构建压缩是否删掉了修饰符：cssnano默认启用
mergeLonghand，可能把btn btn--primary btn--disabled合并成btn btn--primary，需在配置中禁用
BEM本身不加速调试，它只是让“谁在控制这个样式”这个问题有了确定答案；真正在背后起效的，是类名自带上下文 + 工具链配合到位 + 搜索方式不犯错。一旦其中一环松动，比如JS动态拼接className漏了空格、或者编辑器没开全字匹配，整个优势就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
