BEM (Block Element Modifier) 是一种前端命名规范，它的目标是提高代码复用率和可维护性。该规范在大型项目中使用越来越广泛，因为它使代码更易于理解和修改。
BEM 的基本概念
BEM 规则包括三个基本概念：块（Block）、元素（Element）和修饰符（Modifier）。下面对这些概念进行详细说明。
块（Block）
块是一个独立的组件，它具有明确的功能和语义。块的名称应该简洁、清晰，并且不能依赖上下文。例如，一个导航栏可能被称为 nav，一个标题可以被称为 heading。
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#" class="nav__link">About</a></li>
<li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
</ul>
</nav>元素（Element）
元素是块的组成部分，它只有在块的上下文中才有意义。元素的名称应该与块的名称紧密相关，以双下划线（__）分隔。例如，导航栏中的每个链接可以被称为 link。
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#" class="nav__link">About</a></li>
<li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
</ul>
</nav>修饰符（Modifier）
修饰符是块或元素的变体，它用于修改外观、状态或行为。修饰符的名称应该以单下划线（_）分隔。例如，一个大小为小的按钮可以被称为 button_small。
<button class="button button_small">Click me</button>
BEM 的优点
使用 BEM 命名规范有以下几个优点：
可重用性
BEM 使组件更容易重用，因为它们与上下文无关。这意味着您可以将一个组件从一个页面移到另一个页面而不需要做任何修改。
更好的可读性
BEM 命名规范使代码更易于理解和修改。每个类都有一个明确的目的，并且不依赖于上下文。这使得开发人员能够更快地理解代码并进行修改。
更好的可维护性
BEM 命名规范使代码更易于维护。每个类都有一个清晰的目的，这意味着当您需要修改某些功能时，您可以更快地找到并修改相应的代码。
如何使用 BEM
块和元素
- 创建块时，请使用一个单一的 CSS 类来表示它。例如：
.nav。 - 当创建一个块的子元素时，使用两个下划线作为块名称和元素名称之间的分隔符。例如：
.nav__item。
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#" class="nav__link">About</a></li>
<li class="nav__item"><a href
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/48085) ，转载请注明来源
[https://www.javascriptcn.com/post/48085](https://www.javascriptcn.com/post/48085)