🌒

Hi Folks.

Home About

CSS BEM命名规范

BEM（Block, Element, Modifier）是一种命名规范，用于创建可维护和可重用的 CSS 代码。它通过将 CSS 类名组织成独立的块、元素和修饰符，使代码更具结构性和一致性。

BEM 的基本概念

  1. 块（Block）：页面中独立存在的功能性块，块可以包含元素和修饰符。块的命名是唯一的，并且不依赖于页面的其他部分。
  2. 元素（Element）：块的一部分，完成某项具体功能。元素的命名依赖于块，表示为块名后加双下划线和元素名。
  3. 修饰符（Modifier）：用于定义块或元素的不同状态或外观。修饰符的命名依赖于块或元素，表示为块名或元素名后加双横线和修饰符名。

BEM 命名规则

  • 块（Block）：.block
  • 元素（Element）：.block__element
  • 修饰符（Modifier）：.block--modifier 或 .block__element--modifier

示例

以下是一个使用 BEM 命名规范的示例：

1
2
3
<div class="button button--primary">
  <span class="button__text">Click Me</span>
</div>

在这个例子中：

  • button 是一个块，表示按钮。
  • button__text 是块 button 的一个元素，表示按钮的文本。
  • button--primary 是块 button 的一个修饰符，表示按钮的主要样式。

详细说明

块（Block）

块是页面中独立存在的功能性单元。块名应该简洁、描述性强，通常是一个名词。例如：

1
2
3
<div class="header"></div>
<div class="menu"></div>
<div class="footer"></div>

元素（Element）

元素是块的一部分，用于完成某项具体功能。元素名应该紧跟块名，用双下划线 __ 分隔，通常是名词或形容词。例如：

1
2
3
4
<div class="menu">
  <div class="menu__item"></div>
  <div class="menu__link"></div>
</div>

修饰符（Modifier）

修饰符用于定义块或元素的不同状态或外观。修饰符名应该紧跟块名或元素名，用双横线 -- 分隔，通常是形容词或描述状态的词语。例如：

1
2
3
<div class="button button--large"></div>
<div class="button button--disabled"></div>
<div class="menu__item menu__item--active"></div>

BEM 的优点

  1. 可读性：通过明确的命名规则，使 CSS 类名更具描述性和一致性，便于理解和维护。
  2. 可重用性：通过将块、元素和修饰符分离，使组件更易于重用。
  3. 可维护性：通过将样式拆分成独立的块、元素和修饰符，减少了样式冲突和依赖，使代码更易于维护和扩展。

另外，再是使用Sass/scss、Less等预编译CSS库的时候。BEM能让代码逻辑清晰的同时能够更加有层次化，例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.button {
  &__icon {}
  &__text {}
  &--active {}
  &.disabled {}
  &--primary {}
  &--warning {}
  &--info {}
  &:not(&--disabled) {
    &:hover {}
    &:active {}
  }
  // 加载
  &__spin {
    &--loading {}
  }
}

结论

BEM 命名规范是一种有效的 CSS 命名方法，通过将样式组织成独立的块、元素和修饰符，使代码更加结构化和可维护。无论是小型项目还是大型项目，BEM 都能帮助开发者编写更清晰、更易于维护的 CSS 代码。

👋 ;

— 2024年5月21日

bent2685, 🧷 通过RSS订阅

GitHub