BEM 命名中 card__header 不能缩写为 card__head，因“head”语义模糊、复用性差，易与 card__header-icon 等混淆；实操要求 header/body/footer 职责明确，避免泛称；card__body 需配合 flex 布局与 min-height: 0 实现自适应高度；字体用 clamp() 保障可读性；修饰符 card--horizontal 仅用于影响多子元素结构逻辑的跨页面变体。
卡片结构用 BEM 命名时，为什么不能把 header 写成 card__head
因为 head 是模糊词，语义弱、复用差，BEM 要求修饰符名必须准确反映内容角色。实际项目里，card__header 对应的是标题区域（可能含 h2、操作按钮），而 card__footer 明确承载操作或元信息；若缩写为 head，后续加 card__head-icon 就会和 card__header-icon 混淆，团队协作时容易误判结构层级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
card__header专用于顶部内容区（如标题 + 副标题 + 时间） -
card__body严格包裹主要内容，不塞按钮或分隔线 -
card__footer只放底部动作（“查看详情”、“收藏”）或状态标签（“已发布”） - 避免
card__main或card__content这类泛称——它们无法表达在卡片中的真实职能
CSS 中如何让 card__body 高度自适应又不撑爆容器
直接设 height: 100% 不行——它依赖父元素有明确高度，而卡片常嵌在 flex/grid 容器中，父级高度可能是 auto。真正可控的方式是靠父容器的布局上下文来约束，而不是在 card__body 上硬设尺寸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给根元素
.card设display: flex; flex-direction: column; -
card__header和card__footer用默认flex-shrink: 0（不压缩） -
card__body加flex: 1; min-height: 0;——min-height: 0是关键，否则它会无视父容器剩余空间强行按内容撑高 - 如果内部有滚动需求，在
card__body上加overflow-y: auto;，而非在外层卡片上设固定高
响应式卡片中，card__header 的字体大小断点怎么设才不反直觉
很多人按屏幕宽度写断点：@media (max-width: 768px)，结果小屏下标题反而比正文还小。问题出在没对齐阅读逻辑——用户关心的是“这个标题在当前设备上是否易读”，不是“宽度是不是小于 768px”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
clamp()：例如font-size: clamp(1.125rem, 4vw, 1.5rem);，让字号在最小/最大值间随视口平滑变化 - 若需精确控制，断点按字体渲染效果定：比如当
card__header文字在 iPhone SE 屏幕上出现两行截断时，才触发降级 - 避免对
card__header单独设em单位缩放——它会随父级font-size波动，而卡片可能被嵌在不同字号上下文中 - 测试时关掉浏览器缩放，用真机调试，模拟「文字占屏比」而非只看像素值
用 BEM 写卡片时，哪些情况必须拆出 card--horizontal 这类修饰符
不是所有样式差异都值得升级为修饰符。只有当结构变化影响到多个子元素定位逻辑，且该变体会被跨页面复用时，才需要 --modifier。比如横向卡片（图左文右）会让 card__header 和 card__body 排列方向、内边距、甚至响应式行为都完全不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加修饰符前先问：这个样式改动会不会导致
card__header的 margin、flex 顺序、甚至是否显示都得重写？如果是，就该提成card--horizontal - 禁止用修饰符覆盖单个属性，比如
card--small-header——这种应该用工具类或 CSS 自定义属性控制 -
card--horizontal必须同步改写card__header和card__body的flex-basis和padding，否则结构错位 - 如果只是换背景色或圆角，用
card_theme_dark这类主题类更合适，别污染结构命名
