BEM不支持继承关系，因其要求每个类名脱离DOM结构独立存在、可迁移、可识别归属；禁止使用.card__content .button等后代选择器，避免样式意外生效、渲染性能下降及维护困难。
不存在“BEM 中的继承关系”——BEM 本身不支持、也不鼓励 CSS 层级继承式复用。所谓“复杂继承”，往往是误把后代选择器、样式覆盖或组件嵌套当成了 BEM 的能力边界。
为什么不能在 BEM 里写 .card__content .button
这种写法直接破坏 BEM 的核心契约：每个类名必须能脱离 DOM 结构独立存在、可迁移、可识别归属。.card__content .button 一旦被复用到另一个页面，只要那里有个 .button（哪怕不属于 card），样式就可能意外生效或失效。
- 浏览器匹配时会回溯父级，深度 ≥4 就明显拖慢渲染（尤其动态插入节点时）
- 重构 HTML 时，只要挪动一个
<div>，整个选择器就断掉，且无报错提示 - 团队协作中，没人能一眼看出这个
.button是属于 card 还是全局通用按钮
真正可复用的类名组合方式
BEM 允许安全组合的，只有同一 Block 下的类名拼接，且必须语义清晰、职责分明。
- 根块 + 修饰符：
card card--featured—— 表达“这是一个 featured 状态的 card” - 根块 + 元素：
card card__title—— 合法，因为card__title明确从属于card - 元素 + 修饰符：
card__title card__title--large—— 表达“这个标题是 large 变体”，不是靠父类推导 - 禁止跨块组合：
card__title button或card card__title button--primary—— 混淆归属，后期无法维护
嵌套组件场景下怎么避免类名爆炸
当一个 card 里要嵌入 list，再嵌入 avatar，不要写成 card__list__item__avatar。这是典型反模式。
立即学习“前端免费学习笔记（深入）”；
- 让子组件保持完整 BEM 结构：
<div class="list"></div>，而不是<div class="card__list"></div></li> <li>如需上下文微调（比如 list 在 card 里需要更小的 padding），加专用修饰符：<code>list list--in-card
- 禁止用
:where(.card .list)归一化——它绕过了 BEM 的语义隔离，等于又回到依赖结构的老路 - 若用 Vue/React，可用
clsx安全拼接：clsx('list', { 'list--in-card': isInCard })
最容易被忽略的一点：BEM 的“复用”不是靠继承链或选择器权重堆叠实现的，而是靠每个类名自带完整语义上下文。一旦你发现自己在 JS 里反复判断“这个元素是不是在某个父容器下”，说明已经偏离了 BEM 的设计原意。
