不同卡片设计的BEM类名如何规范命名？

序号命名是否可行？ #

可行，但存在致命缺陷：

• 序号无语义，随着组件数量突破50+，没人能记住card-23对应什么业务场景，后期维护时极易混淆，新增或修改组件的成本会越来越高。
• 嵌套元素重复命名（如card-23__title、card-24__title）会产生大量冗余代码，即使样式逻辑完全一致，也得重复编写，违反**DRY（Don't Repeat Yourself）**原则。

更优命名方案 #

1. 语义化命名 + 基础类复用 #

• 给每个卡片赋予业务/功能相关的语义名称，比如card-product（商品卡片）、card-user-profile（用户资料卡片）、card-order-history（订单历史卡片），一眼就能明确组件用途。
• 提取所有卡片共享的样式到基础类（如card-base），包含边框、间距、圆角等通用属性；特定卡片仅编写差异化样式。
• 嵌套元素采用「通用类 + 特定场景覆盖」的方式：通用标题用card-title，仅当某类卡片需要特殊标题样式时，再用card-product .card-title来覆盖通用样式，既复用代码，又保留单独控制的能力。

示例代码：

/* 基础卡片通用样式 */
.card-base {
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #eee;
  background-color: #fff;
}

/* 通用标题样式 */
.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

/* 商品卡片特有样式 */
.card-product {
  background-color: #f9f9f9;
  border-color: #e0e0e0;
}

/* 商品卡片标题特殊样式（仅需差异化时编写） */
.card-product .card-title {
  color: #2c3e50;
  font-size: 20px;
}

2. BEM修饰符变体 #

基于BEM命名规范，用修饰符区分不同卡片类型，而非创建独立的块：

• 基础块为card，不同类型用card--product、card--user、card--order这类修饰符标识。
• 嵌套元素统一使用card__title、card__content，仅当某修饰符下的元素需要特殊样式时，通过card--product .card__title来覆盖通用样式。

示例：

.card {
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #eee;
}

.card--product {
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  font-weight: 600;
}

/* 商品卡片标题差异化样式 */
.card--product .card__title {
  color: #2c3e50;
}

3. CSS变量主题化 #

如果不同卡片的差异仅为颜色、间距等属性值，可以用CSS变量定义主题，通过主题类切换变量，避免重复编写样式：

.card {
  border-radius: var(--card-radius, 8px);
  padding: var(--card-padding, 16px);
  background-color: var(--card-bg, #fff);
  color: var(--card-text-color, #333);
}

/* 商品卡片主题 */
.card--product {
  --card-bg: #f9f9f9;
  --card-text-color: #2c3e50;
  --card-radius: 12px;
}

/* 用户卡片主题 */
.card--user {
  --card-bg: #f5f5f5;
  --card-text-color: #666;
}

总结 #

优先选择语义化命名+基础类复用的方案，既解决了序号命名无意义的问题，又通过通用类减少代码冗余，同时保留对特定元素单独控制的能力；如果组件差异仅为属性值，CSS变量主题化会是更高效的选择。

内容的提问来源于stack exchange，提问作者Mykyta Severyn