BEM - CSS 命名约定

什么是 BEM？

什么是 BEM？

BEM 是 Block（块）、Element（元素）和 Modifier（修饰符）的首字母缩写，是一种创建可复用 CSS 的方法。BEM 的工作原理是提供一种组件命名模式，使组件样式类与标记之间的关系更加清晰。例如，以网页上的导航组件为例。它可能包含一些项目，例如导航容器、列表和列表项。

区块

由于我们正在使用导航组件，并且知道我们有一个导航容器、列表和列表项，我们可以使用 BEM 来帮助我们为这些项目提供一些有意义的类名。BEM 的命名结构遵循一种模式，其中块被命名为诸如、或之类的东西。块是网页（如果您在移动设备上工作，则为屏幕）上的顶级项目。确定一个项目是否为块的最佳方法是确定它本身是否有意义。例如，nav或项目本身是有意义的。您确切地知道这些项目是什么，而无需任何额外的上下文。如果您正在仔细阅读一些 css 并看到，那么您实际上不需要任何其他上下文。您只需阅读类名就可以准确地知道什么是导航。containerheadernavbutton.nav

元素

元素使用双下划线命名，例如nav__list、container__title和button__submit。元素是块的一部分，并没有独立的含义。一个很好的例子就是考虑列表项。li本身并没有独立的含义。它与什么相关？它放在哪里？如果您li在 CSS 中看到 ，那么您几乎不知道 位于标记中的什么位置，也不知道编辑 CSS 会影响页面上li多少个元素。但是，如果您的被命名为，那么这个元素就有了意义。这里需要注意的是，块可以有许多嵌套元素，但块不能嵌套在元素中。这是因为块本身必须有意义。lilinavList__item

修饰符

修饰符是 BEM 中最小的单位，用于描述项目的行为、状态或外观。以导航列表项为例，它们可以包含颜色或悬停修饰符。在 BEM 中，它们看起来像navList__item--blue或navList__item--hover。注意两个破折号。这就是 BEM 命名约定中属性的表示方法。

整合起来

现在我们已经了解了 BEM 命名约定的基础知识，让我们看看它可能是什么样子。使用本文讨论的导航示例，标记可能如下所示：

<div className="nav">
    <nav className="nav__container">
      <ul className="nav__list">
        <li className="navList__item--blue">I am blue!</li>
        <li className="navList__item--red">I am red!</li>
        <li className="navList__item--hover">I have a hover state!</li>
      </ul>
    </nav>
</div>

现在我们知道了 HTML 是什么样子，我们可以设计一些 CSS 类了。根据创建的名称，CSS 可能看起来像这样：

/* Block */
.nav {
  text-decoration: none;
  background-color: white;
  color: #888;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 5px;
}

/* Element */
.nav__ul {
  background-color: white;
  color: #fff;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: -10px; /* realign button text padding */
  font-weight: 600;
  background-color: #333;
  opacity: 0.4;
  border-radius: 5px 0 0 5px;
}

/* Modifier */
.nav__li--blue {
  color: blue;
  font-size: 28px;
  padding: 10px;
  font-weight: 400;
}

/* Modifier */
.nav__li--red {
  border-color: #0074d9;
  color: white;
  background-color: #0074d9;
}

/* Modifier */
.nav__li--hover: hover {
  border-color: #ff4136;
  color: white;
  background-color: #ff4136;
}

想象一下，在一个项目中，你首先看到的是 CSS。如果你看到的 CSS 像上面那样，那么阅读这些类名会更容易，并且能够准确地知道它们应该用来定义什么样式。这是 BEM 最大的好处之一。BEM 允许你以这样一种方式设计代码，即 HTML 和 CSS 既可以单独使用，也可以组合使用。

包起来

请记住，这并不是一个完美的例子，但它的设计方式对我来说是最合理的。这正是 BEM 应该被使用的方式。这里没有放之四海而皆准的方法。如果您或您的团队喜欢不同的类名和结构，那么就使用最适合您项目的方式。这里最重要的是保持代码的简洁、可读和可维护。当您的 CSS 合理时，您可以更轻松地进行编辑，并且确切地知道您正在更改什么，而无需与一堆不同的层叠规则作斗争。