BEM不依赖CSS继承，.card__title样式必须显式声明，不能依靠.card继承font-size或color；所有样式责任落在类本身，Element需包含完整样式声明且与Block物理隔离。
CSS样式继承在BEM中不被依赖
BEM不靠CSS继承来实现样式传递，.card__title 的样式必须显式声明，不能指望它从 .card 继承 font-size 或 color——哪怕 DOM 结构里它是 .card 的直接子元素。BEM 的设计前提就是“类名即样式入口”，所有样式责任落在类本身，而非父容器的 CSS 规则链。
常见错误现象：.card { color: #333; } 写了，但没给 .card__title 单独设 color，结果标题文字颜色在某些浏览器里变灰（继承自 body），在另一些里又变黑（继承自 card）——这不是 bug，是 BEM 本意：你没写，就不该有。
- Element 类必须包含完整样式声明（font、line-height、margin 等），哪怕和 Block 部分重复
- Block 不应设置会影响子 Element 的通用属性（如
color、font-family），除非明确意图让所有后代继承（极少见） - 用
inherit或currentColor属于主动选择，不是默认行为；例如.button__icon { color: currentColor; }是合理设计，但不能因此省略.button__icon的其他样式
Block 与 Element 的样式边界必须物理隔离
一个 .card 的 padding、border-radius、overflow 只作用于自身盒子，.card__content 必须自己声明 padding 或 max-height，不能靠父级 overflow hidden “顺带裁剪”——因为 Element 可能被抽离到别的上下文（比如调试时临时移到 <body> 下），此时父级样式失效，Element 就崩了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
.card__content如果需要圆角内边距，就写border-radius: 8px; padding: 16px;，而不是依赖.card的border-radius和overflow: hidden - 避免用
em或rem基于 Block 字体大小做缩放，Element 应使用固定值或clamp()等独立单位 - 修饰符（如
.card--compact）只改变 Block 自身，不联动修改.card__title的 margin——后者得有自己的.card__title--compact
伪类与伪元素的归属必须明确
BEM 要求伪类（:hover、:focus）和伪元素（::before、::after）都绑定在具体 Block 或 Element 类上，不能跨层级写。比如 .card:hover .card__title 是反模式；正确做法是把交互逻辑收束到 Block 上，或为 Element 单独定义状态。
示例对比：
.card:hover .card__title {
color: #007bff;
}
→ 错。破坏 Element 独立性，且 .card__title 抽离后 hover 失效。
.card--hovered .card__title,
.card__title:hover {
color: #007bff;
}
→ 对。前者用 Modifier 显式表达状态，后者让 Element 自持交互能力。
- Button 的 loading 状态应写成
.button--loading .button__loader，而不是.button:hover .button__loader -
::before若用于装饰性图标，应属于.button__icon::before，而非.button::before—— 后者会让图标脱离语义归属
为什么 Element 不能复用 Block 的 CSS 变量？
虽然 CSS 自定义属性（--color-primary）可继承，但 BEM 中不鼓励 Element 直接读取 Block 定义的变量。原因很简单：Element 要能脱离 Block 存活，就得自带变量 fallback 或显式重定义。
错误写法：.card { --card-bg: #fff; } .card__title { background: var(--card-bg); } —— 抽离 .card__title 后，--card-bg 未定义，背景变透明或默认色。
正确做法：
- Block 提供变量时，Element 显式继承并 fallback：
.card__title { background: var(--card-bg, #fff); } - 更推荐：Element 使用自己的命名空间变量，如
--title-bg，由 Block 初始化，但允许单独覆盖 - 工具链（如 PostCSS 插件）可自动注入 fallback，但手写时别省
真正容易被忽略的点是：BEM 的“独立性”不是指 HTML 结构能否拆开，而是指 CSS 声明能否脱离上下文仍生效——哪怕你 never 真的把 .card__title 拆出去用，它的样式也得经得起这个假设。
