CSS 中的 BEM 是什么？

你是否曾经开发过一个只有一个巨大 CSS 文件的应用，然后发现当你在一个地方修改样式规则时，其他地方却出现了意想不到的变化？我早期从事前端开发时经常遇到这个问题，真是令人沮丧！那么，如何才能避免这种情况发生呢？

你需要明确你的样式规则！

CSS 的作用域化意味着以系统化的方式封装样式规则，使其仅应用于特定的 HTML 代码块。诸如Styled Components或前端框架自带的CSS 模块之类的 CSS-in-JS 解决方案，通过将样式作用域限定在组件模板中，在很大程度上解决了这个问题。这意味着您无需担心一个组件中的类会影响另一个组件的样式——即使您使用了相同的类名。真棒！

但如果你刚刚入门，想要系统地构建纯 CSS，而不想陷入 CSS-in-JS 的泥潭，那该怎么办呢？

使用纯 CSS 进行开发

为了在纯 CSS 中控制样式的作用域，目标是将 CSS 类专门且仅针对单个 HTML 组件进行声明。样式规则应该尽可能详细且易于理解，避免依赖继承或浏览器默认行为。这种系统不鼓励在多个组件中使用重复的实用类，因为这正是导致文章开头所述问题的原因。如果更改多个组件中使用的实用类的样式属性，可能会影响整个应用程序的布局——有时甚至会产生非常糟糕的后果！

让我们来看看如何利用像BEM这样的系统的力量。

BEM代表什么？

BEM 代表块（block）、元素（element）和修饰符（modifier），它是一个非常实用的系统，可以帮助你将 CSS 样式属性限定到 HTML 代码块中。此外，它还鼓励你编写更具描述性和自文档性的 HTML 和 CSS 代码，从而帮助你在代码本身中识别 CSS 类的用途和预期功能。

除了 BEM 之外，还有其他类命名约定可以帮助你在编写 HTML 和 CSS 时限定样式范围，例如 OOCSS 和 SMACSS。你甚至可以创建自己的系统！但最重要的是记住，要使用一种系统，坚持使用该系统，并使其为你所用。

那么，我们该如何使用BEM呢？

块、元素、修饰符

让我们来看看BEM的基本组成部分。

代码块：一段 HTML 代码，样式将应用于该代码块。

.block {
}

元素：该代码块内的任何元素，命名空间与您的代码块名称相同。

.block__elementOne {
}

.block__elementTwo {
}

修饰符：用于向元素添加样式，而无需创建单独的 CSS 类的标志

.block__elementOne--modifier {
}

BEM语法约定

• 使用一个或两个下划线将块名称与元素名称分隔开。
• 使用一个或两个短横线分隔元素名称及其修饰符
• 使用驼峰命名法的描述性类名

BEM 的应用

在上下文中，使用上述类名的 HTML 代码可能如下所示：

<section class="block">
  <p class="block__elementOne">This is an element inside a block.</p>
  <p class="block__elementOne block__elementOne--modifier">This is an element inside a block, with a modifier.</p>
</section>

举个实际例子，如果使用更贴近现实的类名，可能看起来像这样：

<section class="container">
  <p class="container__paragraph">This is a paragraph inside a container.</p>
  <p class="container__paragraph container__paragraph--bold">
    This is a paragraph inside a container, with a modifier that adds bold styling.
  </p>
</section>

使用完全声明式的方法，即不依赖继承或默认浏览器样式，你的 CSS 类可能看起来像这样：

.container {
  display: block;
  margin: 1rem auto;
  padding: 1rem;
  box-sizing: border-box;
}

.container__paragraph {
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

.container__paragraph--bold {
  font-weight: bold;
}

请注意，上述类中声明了我们可能习以为常的任何默认浏览器行为——例如在元素display: block上.container <div>。这是一种极其有效的方法，可以确保即使您需要更改组件中的 HTML 元素（例如，在上面的示例中将<div>默认的 `<div> display: block` 替换为<span>默认的`<div> display: inline`），组件的样式也不会受到影响。

总结

使用 BEM 并不能解决你所有的CSS 问题（祝你好运，看看如何让<div>布局中的元素居中！），但它可以帮助你朝着正确的方向迈出一步，使你的 CSS 更易读、更清晰，并避免任何意外结果。再次强调，最重要的是记住要使用一套系统，坚持使用这套系统，并让它为你所用。

欢迎观看我最新的 YouTube 视频，它与本文内容相呼应。订阅即可定期获取更多前端 Web 开发技巧！

记住——创造事物，学习知识，热爱你所做的事情！