BEM 不依赖 CSS 继承，强调类名独立性与显式声明；应避免后代选择器和全局样式污染，通过重置继承属性、使用修饰符或 CSS 自定义属性实现可控复用。
BEM 本身不处理 CSS 继承样式——它压根不依赖继承，也不鼓励你靠父级样式“传下来”什么。所谓“BEM 中的继承”，多数是误用后代选择器或全局样式污染导致的假象。
为什么 .card__title 不该靠 .card 的 font-size 继承
浏览器确实会把 font-size 从 .card 传给 .card__title，但这不是 BEM 的设计意图，而是 CSS 自带行为。问题在于：
- 一旦你在其他地方复用
.card__title（比如嵌入到.article里），它的字号就可能突然变小或错乱，因为你没显式声明它该有多大 -
.card { font-size: 1rem; }这种写法实际影响所有子元素，包括.card__footer、.card__meta，但你未必想让它们都跟着变 - DevTools 里看到被划掉的
font-size，根本看不出是哪个父级规则在干扰，排查成本高
.button--primary 覆盖不了 body 的 color 怎么办
这不是 BEM 的问题，是 CSS 优先级和继承范围的问题。可继承属性（如 color、font-family）只要没被显式设置，就会一直往上传递。解决方式很直接：
- 在 block 根上重置关键继承属性：
.button { color: inherit; font-family: inherit; }，避免意外受外层影响 - 真要控制颜色，就在修饰符里写死：
.button--primary { color: #007bff; }，而不是指望它从 body 继承 - 若项目用了 CSS 自定义属性，可在 :root 定义
--btn-color-default，再由.button读取，这样既可控又可覆盖
想复用基础样式，但又怕破坏 BEM 独立性
别用 .base-button + .button 这种 class 叠加，那是把结构耦合进 HTML。更安全的做法：
立即学习“前端免费学习笔记（深入）”；
- 用 Sass
@extend %base-button，把 base 定义为占位符（%开头），不生成真实 class，HTML 里只写class="button" - 用原生 CSS 自定义属性桥接：把 padding、bg、border 抽成
--base-btn-padding等变量，在.button里padding: var(--base-btn-padding); - 禁止写
.base-button .button__icon这类后代选择器——它会让.button__icon失去独立性，挪到别的上下文就失效
最容易被忽略的是：BEM 的“复用”靠的是每个类名自带完整语义，不是靠 DOM 层级或继承链撑起来的。如果你发现自己总在 JS 里判断 el.closest('.card') 才决定样式逻辑，说明已经偏离了 BEM 的初衷。
