BEM，一点就通，从此前端之路畅通无阻！

前端

2023-09-25 14:04:43

BEM：提升前端代码质量的秘密武器

在瞬息万变的前端世界中，代码的可读性和可维护性变得至关重要。BEM（Block Element Modifier）命名规范正是在此脱颖而出，它将帮助你构建清晰、结构化的前端代码。

一、什么是BEM？

BEM是一种流行的前端命名约定，其将HTML元素划分为三个核心部分：

区块（Block）： 独立且可复用的UI组件，如导航栏或按钮。
元素（Element）： 区块的一部分，如导航栏中的菜单项或按钮中的图标。
修饰符（Modifier）： 对区块或元素的修改，如导航栏的活动状态或按钮的禁用状态。

BEM遵循一套简明扼要的命名规则：

区块名： 使用驼峰式命名法，如navbar。
元素名： 在区块名后加上下划线和元素名，如navbar__menu-item。
修饰符名： 在区块名或元素名后加上双下划线和修饰符名，如navbar__menu-item--active。

二、BEM的优势

采用BEM的好处显而易见：

提升代码可读性： BEM将代码组织成易于理解的块、元素和修饰符，大幅提升代码的可读性。
提升代码可维护性： BEM让代码更易于维护，因为你可以轻松地添加、删除或修改块、元素和修饰符，而无需影响其他代码部分。
提升代码一致性： BEM有助于确保你的代码遵循统一的命名约定，让代码更整洁美观。
提升代码可复用性： BEM将代码组织成可复用的块、元素和修饰符，从而提高代码的可复用性。

三、BEM的实战指导

让我们通过一个例子来了解如何使用BEM。假设我们有一个导航栏，其中包含菜单项和按钮：

<div class="navbar">
  <ul class="navbar__menu">
    <li class="navbar__menu-item">
      <a href="#">Home</a>
    </li>
    <li class="navbar__menu-item">
      <a href="#">About</a>
    </li>
    <li class="navbar__menu-item">
      <a href="#">Contact</a>
    </li>
  </ul>

  <button class="navbar__button">
    Login
  </button>
</div>

.navbar {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.navbar__menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.navbar__menu-item {
  display: inline-block;
  margin-right: 10px;
}

.navbar__menu-item a {
  color: #fff;
  text-decoration: none;
}

.navbar__button {
  background-color: #444;
  color: #fff;
  padding: 10px;
  border: none;
}

.navbar__button:hover {
  background-color: #555;
}