BEM通过将样式作用域硬编码进类名（如card__title）实现隔离，不依赖DOM嵌套，仅匹配类名即可生效，故修改card__title不会影响header__title等其他组件。
BEM 本身不减少代码行数，但能大幅降低「改一处、查八处、崩三处」的重构风险——关键在于把原本藏在 DOM 结构、祖先类、标签类型里的隐式依赖，全部显式写进类名里。
为什么改 .title 会意外影响购物车和弹窗
传统写法如 .user-card .title 或 .header h3 把样式生效条件绑死在 HTML 层级上。DOM 一动，样式就静默失效；更危险的是，它可能意外匹配到另一个模块的 .title，导致改 A 却崩 B。
- 把
<h3>换成<div role="heading">→ 样式立刻消失，控制台无报错 - 在侧边栏也用了
.title→ 购物车标题字体突然变小，排查时才发现是全局 CSS 覆盖 - 抽离
product-card组件到新页面 → 所有样式失效，因为外层容器没了.product-card类
怎样才算真正合规的 BEM 类名
不是加了 __ 和 -- 就算 BEM，核心是三层语义闭环：块（Block）独立可复用，元素（Element）必须依附于块，修饰符（Modifier）必须描述明确状态。
- 正确：
.search-form（块）、.search-form__input（元素）、.search-form__button--disabled（修饰符挂载在元素上） - 错误：
.btn__icon--primary→primary是按钮整体状态，应写成.btn--primary__icon或统一为.btn--primary - 错误：
.user-info__avatar--large→ 若large是整张卡片尺寸变体，应拆为.user-info--large+ 内部重置，而非塞给元素 - 禁止：
.btn .icon（含空格的选择器）、.disabled（单独存在的修饰符）
重构时最容易被忽略的三个断裂点
真正卡住进度的，往往不是技术方案，而是看不见的耦合。BEM 能防住其中两类，但第三类必须人工盯住。
立即学习“前端免费学习笔记（深入）”；
- JS 动态拼接类名漏写 Block 前缀：
className={isFeatured ? 'featured' : ''}→ 应为product-card--featured - 连字符写错：
card__title--large（非法）→ 正确是card__title--large（注意双中划线只用于 modifier） - 大小写混用：
Card__header和card__header在 Linux 构建环境视为不同类名，样式丢失且无报错
搜索和删除时怎么确保零残留
BEM 类名是自解释的唯一标识符。浏览器只检查 class 属性是否包含该完整字符串，不关心它嵌在哪层、有没有父级、甚至是否被 display: none 隐藏。
- 搜
user-card__avatar--rounded→ 一次性定位 HTML 模板、CSS 文件、JS 动态拼接处 - 删掉
user-card.css后，样式不会残留“幽灵规则”，因为没对应类名的元素，规则根本不生效 - VS Code 中用正则搜索
user-card__(?!-)可排除user-card--修饰符干扰，更快定位元素级改动 - 避免写
card-image或cardImage→ 这类非标准命名会逃过card__搜索，导致漏改
最常被跳过的细节是：块名必须对应真实 DOM 节点。比如写了 user-info__avatar，但 HTML 里 user-info 只是个没加 class 的 <div>，那整个命名链就断了——搜索不准、重构失准、调试时 computed styles 里根本看不到对应规则。
