BEM命名规范

BEM是Block（块）、Element（元素）、Modifier（修饰符）的缩写，是一种CSS命名约定，旨在提高代码可读性和组件复用性。

核心概念

Block（块）

独立可复用的功能单元，命名使用小写字母，多个单词用连字符连接。

.block {}
.card {}
.user-profile {}

Element（元素）

块的组成部分，依赖块存在，使用双下划线连接块名。

.block__element {}
.card__title {}
.card__content {}
.user-profile__avatar {}

Modifier（修饰符）

定义块或元素的外观、状态变化，使用双连字符连接。

.block--modifier {}
.block__element--modifier {}
.card--featured {}
.card__title--large {}
.button--primary {}
.button--disabled {}

命名规范

实际示例

<div class="card card--featured">
  <div class="card__header">
    <img class="card__avatar card__avatar--small" src="avatar.jpg" alt="">
  </div>
  <div class="card__body">
    <h2 class="card__title">标题</h2>
    <p class="card__description">描述内容</p>
  </div>
  <div class="card__footer">
    <button class="card__button card__button--primary">确认</button>
    <button class="card__button card__button--secondary">取消</button>
  </div>
</div>

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card--featured {
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.card__header {
  padding: 16px;
}

.card__avatar {
  border-radius: 50%;
}

.card__avatar--small {
  width: 40px;
  height: 40px;
}

.card__body {
  padding: 0 16px;
}

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

.card__button--primary {
  background: #007bff;
  color: white;
}

.card__button--secondary {
  background: #6c757d;
  color: white;
}

嵌套规则

避免多层嵌套，最多两层（块+元素）。

/* 错误：嵌套过深 */
.block__element__subelement {}

/* 正确：重新定义为新块 */
.block {}
.block__element {}
.subelement {}

不要为了避免嵌套而过度拆分块，保持语义清晰更重要。

与预处理器配合

.card {
  border: 1px solid #ddd;

  &--featured {
    border-color: #007bff;
  }

  &__header {
    padding: 16px;
  }

  &__title {
    font-size: 18px;

    &--large {
      font-size: 24px;
    }
  }
}

要点总结

1. Block是独立单元，Element是块的组成部分，Modifier定义状态变化
2. 使用__连接块与元素，使用--连接修饰符
3. 避免多层嵌套，最多两层结构
4. 命名要有语义，能直观反映组件结构
5. 结合预处理器可简化代码编写