命名千万条，BEM第一条

前端

2023-12-30 18:50:13

在CSS的世界里，命名是一门艺术，也是一门科学。一个好的命名规范可以帮助我们轻松地维护和扩展我们的CSS代码，而一个糟糕的命名规范则会让我们在维护代码时欲哭无泪。

在众多的CSS命名规范中，BEM（Block Element Modifier）规范无疑是最受欢迎的之一。BEM规范是一种非常简单易懂的命名规范，它可以帮助我们轻松地将我们的HTML元素和CSS样式关联起来。

1. BEM简介

BEM规范的全称是Block Element Modifier，它是一种CSS命名规范，它将HTML元素划分为三个部分：

块（Block） ：块是HTML元素中的一个独立的、可重复使用的组件，它通常对应着一个特定的功能或行为。例如，一个导航栏就是一个块。
元素（Element） ：元素是块中的一个组成部分，它通常对应着一个特定的UI元素。例如，导航栏中的一个导航链接就是一个元素。
修饰符（Modifier） ：修饰符是用来修饰块或元素的外观的。例如，我们可以使用修饰符来改变块或元素的颜色、大小或位置。

BEM规范的命名规则非常简单，它使用破折号（-）来分隔块、元素和修饰符。例如，一个导航栏的块名为nav，导航栏中的一个导航链接的元素名为nav__link，导航栏中的一个激活的导航链接的修饰符为nav__link--active。

2. BEM命名规范的优点

BEM命名规范有很多优点，其中包括：

易于理解和使用 ：BEM命名规范非常简单易懂，即使是初学者也可以轻松地理解和使用它。
可扩展性强 ：BEM命名规范具有很强的可扩展性，它可以很容易地扩展到新的HTML元素和CSS样式。
可维护性强 ：BEM命名规范可以帮助我们轻松地维护和扩展我们的CSS代码，避免代码混乱和难以维护的情况。
可读性强 ：BEM命名规范可以帮助我们提高代码的可读性，使代码更容易理解和维护。

3. BEM规范的实战示例

下面是一个使用BEM规范来编写CSS代码的示例：

<nav class="nav">
  <a href="#" class="nav__link">Home</a>
  <a href="#" class="nav__link">About</a>
  <a href="#" class="nav__link nav__link--active">Contact</a>
</nav>

.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.nav__link {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

.nav__link--active {
  background-color: #f00;
  color: #fff;
}