BEM的.card__header、.card__body、.card__footer是显式边界协议，非命名习惯；后代选择器易因DOM层级变动或全局样式污染导致布局崩坏，须严格遵循元素不可嵌套、职责物理隔离及box-sizing等硬约束。
卡片布局混乱，根本不是样式写得少，而是结构契约没立住——BEM 的 .card__header、.card__body、.card__footer 不是命名习惯，是显式声明“这里必须是头部”“这里必须是内容区”的边界协议。
为什么后代选择器 .card .header 一改就全崩
它把样式和 DOM 层级绑死了：一旦卡片被塞进 .modal 或 .sidebar，.card .header 就可能匹配到外部同名节点；更隐蔽的是，别人改了全局 .header 的 margin，你的卡片顶部间距就莫名错位。
常见错误现象：
-
.card > .header—— 看似严格，但 HTML 里多套一层<div>，样式立刻断链 -
.card-header（缺双下划线）—— 工具链无法识别为 Element，CSS Modules 也难做作用域隔离 -
.card__title和.card__subtitle写成同一层级复用类 —— 后续想给 subtitle 单独加transition，就得靠!important覆盖
card__header 该包什么、不该包什么
.card__header 是功能语义，不是容器语义。它只承载标题、副标题、操作按钮等头部信息，所有子元素必须显式声明归属，不能靠结构推导。
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
正确做法：
- 标题用
.card__title，不写.title或.card-title - 副标题用
.card__subtitle，不是.card__header-subtitle（违反 BEM 元素不可嵌套原则） - 右上角操作按钮用
.card__header-action，而非.card__action（避免和 footer 中的 action 混淆） - 需要图标时，用
.card__title-icon，不是.card__header__icon（三层命名 = 结构超限，该拆组件）
card__body 和 card__footer 的职责必须物理隔离
Body 是内容承载区，Footer 是交互出口区——二者边界不能靠“看起来像”来划分。比如把操作按钮塞进 .card__body，会导致后续加 loading 状态或禁用态时，样式逻辑被迫跨区域污染。
容易踩的坑：
- 在
.card__body里写button并加.card__body-action类 —— 违反职责分离，按钮语义属于 Footer - 用
:has()或:nth-child()控制 footer 布局 —— 重排开销明显上升，且在旧浏览器中直接失效 - 给
.card__footer设margin-top: auto拉底 —— 在 flex 容器中有效，但换到 grid 布局就失效，应统一用align-self: end或固定高度策略
为什么加了 BEM 还乱？检查这三处硬性约束
BEM 命名只是第一步，真正让卡片不乱的，是它背后强制你面对的三个事实：
- 所有卡片必须用
box-sizing: border-box—— 否则padding和border会额外撑宽，flex/grid 中列宽失准 - 卡片外层容器必须设
align-items: stretch（flex）或grid-auto-rows: minmax(min-content, 1fr)（grid）—— 否则内容高度不一时，底部永远对不齐 -
.card__body必须有明确高度控制手段：要么设min-height，要么用display: flex; flex-direction: column+flex: 1拉伸主体，否则文字少的卡片会塌缩，破坏视觉节奏
最常被忽略的一点：BEM 不解决盒模型问题，也不自动对齐高度。它只帮你把“谁该负责什么”写进类名里——剩下的，得靠 border-box、flex、min-height 这些硬规则兜底。
