搜card__title比搜.title靠谱十倍，因bem将模块归属写入类名，全局搜索可精准定位html、css、js三端代码，不依赖dom结构或父级存在，避免样式漏匹配或静默失效。
因为BEM把“谁在用这个样式”直接写进类名里，重构时不用猜、不用翻DOM树、不依赖JS上下文——搜card__title就能准确定位HTML、CSS、JS三端所有相关代码，改起来有边界、测起来有范围、崩起来有提示。
为什么搜card__title比搜.title靠谱十倍
传统选择器.title不带归属，全局一搜几十处，根本分不清是文章标题、弹窗标题还是侧边栏标题；而card__title天然绑定模块，VS Code里勾选Whole Word一搜，结果全是card上下文里的东西。更关键的是：它不依赖父级是否存在——哪怕把card__title元素挪到modal里，样式照样生效，不会像.card .title那样静默失效。
- 常见错误现象：
.user-card h3看似只管卡片，但一旦其他模块也用了h3又没加BEM类，样式就漏过去 - 真实调试场景：DevTools里点开computed styles，如果没看到
card__title对应的规则，八成是HTML漏写了这个类，而不是选择器写错了 - 性能提示：VS Code正则搜索
card__[^-]*可排除card--修饰符干扰，更快锁定元素级改动
button--disabled必须和button共存，否则就是无效代码
Modifier不是独立组件，而是状态开关。单独写class="btn--disabled"，CSS规则再全也没用——因为浏览器找不到btn这个基础类，btn--disabled的样式根本不会被应用。BEM要求Modifier必须依附于Block或Element，这是语义契约，不是格式建议。
- 常见错误现象：写
class="btn--loading"，但CSS只定义了.btn--loading，没写.btn基础样式，加载态完全不显示 - 正确写法：
class="button button--loading"，确保基础类始终存在 - 容易被忽略的点：JS动态增删class时漏掉基础类，线上就断样式，而且你搜
button--会误以为“已覆盖”，实际根本没生效
重构旧项目时，哪些地方绝对不能全局替换
别碰.btn、.content、.header这类泛化类名。它们在JS里大概率被document.querySelector('.btn')硬编码，在埋点里被后端日志硬记录，在设计师标注里被叫作“红色按钮”却对应多个class。全局搜替等于主动引爆雷区。
- 优先处理三类高危点：JS硬编码的类名、高频修改的CSS文件、多人反复改过的混杂类（如
.sidebar） - 跳过工具类：
.hidden、.clearfix统一迁到u-hidden、u-clearfix前缀下，和BEM业务类物理隔离 - HTML结构不动：老代码里
<div class="form"><input></div>，不要拆结构，只原地加归属——改成class="login-form"和class="login-form__input"
真正难的不是写对__和--，而是守住块名必须对应真实功能单元这一条线。比如user-info__avatar，如果HTML里user-info只是个没加class的div，整个命名链就断了——搜索失效、重构失准、协作失语。这层语义锚定，机器检查不了，只能靠人盯住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
