bem要求类名必须显式体现块、元素、修饰符三层语义，.card__cover和.card__headline符合规范，而.card-cover会被识别为新块、.cover则完全脱离上下文导致样式污染。
直接用 .card__cover 和 .card__headline，别写 .card-cover 或 .cover——BEM 不是加个短横线就叫“规范”，命名必须显式绑定块、元素、修饰符三层语义。
为什么不能用 .card-cover 或 .cover
这类命名看似简洁，实则破坏 BEM 的契约性：.card-cover 会被工具链识别为一个新块（block），而非 card 的子元素；.cover 更危险，它完全脱离上下文，一旦全局有另一个模块也用 .cover（比如轮播图），样式就会互相污染。BEM 要求所有元素名前缀必须是 块名__，这是作用域隔离的底线。
.card__cover 该包含什么内容
.card__cover 是封面区容器，只负责承载视觉层信息，不承担语义或交互逻辑：
- 它内部可嵌
<img>，但图片必须加.card__cover-img—— 不写.img或.cover-img，避免跨块复用歧义 - 允许叠加标题水印（如半透明文字），但要用
.card__cover-title，不是.card__title（后者属于主标题区） - 禁止在
.card__cover里放按钮、链接等操作控件——它们属于.card__header-action或.card__footer职责范围
.card__headline 和 .card__description 的边界在哪
headline 是卡片第一眼要传达的核心信息，description 是辅助说明，二者不可混用：
-
.card__headline必须是<h3></h3>或语义化标题标签，不能是<p></p>；若业务要求它可点击，加.card__headline--link修饰符，而不是另起一个.card__link -
.card__description应限制为纯文本段落，不带图标、不嵌链接；需要图标时，用.card__description-icon单独声明，且必须与描述文本同级并列，不能作为子元素塞进<p></p>里 - 如果描述内容含富文本（如
<strong></strong>、<em></em>），请确保父容器.card__description设line-height和max-width，避免子元素撑破卡片宽度
容易被忽略的细节：响应式下 cover 与 headline 的层级关系
小屏时封面图常被压缩或隐藏，但 .card__headline 不能因此“上浮”侵占封面空间——这不是靠 margin-top: -20px 临时补救，而应在 BEM 命名中预留结构弹性：
- 给封面区加
.card__cover--hidden@sm这类媒体查询修饰符（注意：修饰符名带@sm是约定，非 CSS 原生支持，需配合构建工具解析） -
.card__headline在移动断点下应设margin-top: 0，但这个值必须来自独立类名，比如.card__headline--no-top-margin@sm，而非依赖父元素状态 - 绝对不要用
.card__cover + .card__headline这类相邻选择器控制间距——BEM 禁止依赖 DOM 顺序，一旦中间插入新元素，样式就断链
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
