BEM是什么

BEM 是一种 CSS 命名约定，它代表 Block, Element, Modifier。BEM 的目的是帮助开发者创建清晰、可重用的 CSS 类名，从而使代码更加模块化和易于维护。

• Block：代表一个独立的组件或模块，可以是页面上的任何部分，如页眉、页脚、导航栏等。Block 通常由一个或多个 Element 组成。
• Element：是 Block 的组成部分，如导航栏中的链接、按钮等。Element 通常是 Block 的子元素，但也可以是嵌套在其他 Element 中的元素。
• Modifier：用于改变 Block 或 Element 的外观、行为或状态。Modifier 可以是一个布尔值（表示是否应用某种样式或行为），也可以是一个具体的值（表示应用某种特定的样式或行为）。

BEM 的命名约定如下：

• Block：使用单个连字符 - 连接单词，例如 header、footer、navbar 等。
• Element：使用双下划线 __ 连接 Block 名和 Element 名，例如 header__logo、navbar__item 等。
• Modifier：使用双连字符 -- 连接 Block 名或 Element 名和 Modifier 名，例如 button--primary、card--highlighted 等。

例如，一个导航栏的 BEM 类名可能如下：

.navbar {
  /* 导航栏的样式 */
}

.navbar__item {
  /* 导航栏项目的样式 */
}

.navbar__item--active {
  /* 导航栏项目激活状态的样式 */
}

在 HTML 中，使用 BEM 类名的方式如下：

<nav class="navbar">
  <ul class="navbar__list">
    <li class="navbar__item">
      <a href="#" class="navbar__link">首页</a>
    </li>
    <li class="navbar__item navbar__item--active">
      <a href="#" class="navbar__link">关于我们</a>
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link">产品</a>
    </li>
  </ul>
</nav>

使用 BEM 可以避免样式冲突，使代码更易于理解和维护。