抽象块是BEM中不绑定业务语义、专为复用设计的通用容器，如card、list、grid；其类名无业务关键词，仅定义基础布局与响应式契约，通过Modifier或Element适配场景，提升复用率在于“改得少”，需被三个以上模块实际复用并仅微调即可满足需求。

“抽象块”不是BEM官方术语，而是开发者对一类特定Block的通俗叫法——它指不绑定具体业务语义、专为复用而设计的通用容器或功能单元，比如 card、list、grid 这类命名。

为什么叫“抽象块”而不是“业务块”

真正区分在于语义粒度：user-profile-card 是业务块（含领域信息），而 card 是抽象块（只表达结构与行为共性）。前者难以跨项目复用，后者可被 product-card、article-card 等继承并扩展。

• 抽象块的类名不含业务关键词（如不叫 homepage-banner，而叫 banner）
• 它的样式只定义基础布局、间距、响应式断点等通用契约，不设定颜色、字体、图标等具体视觉
• 它通常配合 Modifier（如 card--horizontal）或嵌套 Element（如 card__header）来适配不同场景

抽象块如何提升CSS复用率

关键不在“写得少”，而在“改得少”。一个设计良好的 card 块，能让多个业务组件共享同一套基础样式逻辑：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 所有卡片类组件都用 card 作为根类，避免重复写 display: flex、border-radius、box-shadow 等基础规则
• 新增业务卡片时，只需定义 product-card__price 这类元素样式，而非从头重写整个卡片结构
• 当设计系统要求统一卡片圆角为 8px，只需改一处 .card 的 border-radius，所有继承者自动同步

容易踩的坑：抽象过头 or 抽象不足

抽象块一旦失控，反而增加维护成本：

立即学习“前端免费学习笔记（深入）”；

• 过度抽象：比如把 button 拆成 btn + btn__icon + btn__label，再加 btn--primary、btn--outline、btn--small……最后发现 80% 的修饰符只在某一个页面用，成了“伪通用”
• 抽象不足：定义了 card，但内部结构硬编码了 h3 标题和两行文本，导致 event-card 必须覆盖大量样式才能塞进日期+地点+按钮
• 忽略上下文约束：抽象块若没声明默认 max-width 或 margin 行为，在不同布局中会意外撑满容器或坍缩

真正有价值的抽象块，是那些被至少三个以上不同业务模块实际复用、且每次复用都只通过 Modifier 或子元素微调就能满足需求的块。它不靠名字“看起来通用”，而靠使用痕迹证明自己值得被抽象。