BEM通过block__element--modifier结构将归属、层级、状态显式编码进类名，如login-form__submit明确标识模块归属，杜绝隐式依赖与样式污染。
类名自带上下文，不用猜样式归属
传统写法里一个 .btn 类，你根本不知道它属于哪个模块：是登录表单里的按钮？还是商品卡片的操作按钮？改它可能同时影响七八个地方。BEM 把归属关系直接塞进类名里：login-form__submit、product-card__add-to-cart——看到名字就知道谁在管它，复制粘贴到新页面也不会意外覆盖旧样式。
禁止后代选择器，切断隐式依赖
常见翻车点：.card .title 这种写法看似省事，实际让 .card 完全不敢复用：只要父容器结构一变，或者另一个模块也用了 .title，样式就失效或错乱。BEM 强制只用单类名触发样式：card__title 独立生效，不依赖 card 是否存在、是否嵌套多深。浏览器匹配快，人眼理解也快——样式只绑定一个 class，耦合点从 N 个压到 1 个。
Modifier 必须依附宿主，状态不越界
修饰符不是随便加的：button--disabled 合法，button__icon--hidden 是错的（应为 button--icon-hidden 或拆出新 Block）。这是因为 Modifier 表达的是组件整体的状态，而不是某个子元素的独立行为。一旦允许子元素挂修饰符，下游开发者就会开始写 .card__content .button--loading，又回到嵌套依赖的老路。真正容易被忽略的是：Modifier 的叠加规则必须文档化——比如 button--primary 和 button--small 可共存，但 button--large 和 button--small 互斥，没人写清楚，后期就靠试错。
物理边界不明确，BEM 就会静默失效
BEM 文档通常没写清一条硬约束：button__text 必须是 button 的直接子节点。但开发者随手写成 <button><span><span class="button__text">…</span></span></button>，样式照样生效——因为浏览器不报错。可一旦换成 CSS Modules 或将来上 Shadow DOM，这种“伪合法”结构立刻崩。所以 BEM 不只是命名，更是对 DOM 层级的契约：每个 __ 都暗含“直属子元素”语义，漏掉这点，复用时就会出现“看着一样、跑起来不对”的问题。
立即学习“前端免费学习笔记（深入）”；
