什么是 BEM 方法论？

Question

我最近听说了 BEM 方法。

BEM 方法论的具体用途是什么？
BEM 在哪些方面使我们的工作更轻松？
使用 BEM 是一种好习惯吗？

Answer 1

BEM 是一种命名方法。它代表块元素修饰符，其目的是促进模块化并使样式和类更容易维护。

在回复中不太容易解释，但我可以给你基本的想法。

因此，如果您正在考虑菜单，那么整个元素/组件结构将是：

块：菜单 元素：项 修饰符： 水平，垂直

通过遵循标准的 BEM 约定，您可以在 CSS 中编写如下内容：

html,
body {
  height: 100%;
}

.menu {
  display: block;
}

.menu__item {
  display: inline-block;
  line-height: 30px;
  width: 100px;
}

.menu--horizontal {
  width: 100%;
  height: 30px;
}

.menu--vertical {
  width: 100px;
  height: 100%;
}

.menu--horizontal .menu__item {
  border-right: 1px solid #e5e5e5;
  text-align: center;
}

.menu--vertical .menu__item {
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
}

<div class="menu menu--horizontal">
  <div class="menu__item">Home</div>
  <div class="menu__item">About</div>
  <div class="menu__item">Contact</div>
</div>

正如您从代码中看到的那样，元素与块之间用 2 个下划线分隔，修饰符用 2 个破折号分隔。

现在，如果您将菜单上的修饰符从 --horizontal 更改为 --vertical，则块和内部元素都会选择特定的修饰符样式。

这应该是一个基本示例，但它应该让您了解这种方法的强大之处，因为它允许将任何组件拆分为这些基本的块元素修饰符结构，使一切都易于维护。

另外使用像 SASS 这样的预编译器来编写它会更容易（我不会详细介绍，但给你一个想法）：

.menu {
  display: block;

  &__item {
    display: inline-block;
    line-height: 30px;
    width: 100px;
  }

  &--horizontal {
    width: 100%;
    height: 30px;
  }

  &--vertical {
    width: 100px;
    height: 100%;
  }
}

这是一种可扩展的方法，因此可用于小型项目或大型项目。

它需要一点时间来适应，所以做一些研究并在小规模项目中使用它是一个很好的起点。

这是一个用例，如果您想在实际项目中使用它https://m.alphasights.com/how-we-use-bem-to-modularise-our-css-82a0c39463b0#.2uvxts71f

希望对您有所帮助:)

Answer 2

什么是 BEM？

BEM stands for Blocks, Elements and Modifiers. It's a methodology initially conceived by Russian tech company Yandex。正如所暗示的那样，BEM 方法论就是将 HTML 和 CSS 代码组件化为三种类型的组件：

块：独立的实体，它们本身就有意义。例如 header、container、menu、checkbox 和 textbox
元素： 块的一部分没有独立的意义并且在语义上与它们的块相关联。例如 menu item、list item、checkbox caption 和 header title
修饰符： 块或元素上的标志，用于更改外观或行为。例如 disabled、highlighted、checked、fixed、size big 和 color yellow

BEM 的目标是不断优化您的 CSS 代码的可读性、可维护性和灵活性。实现这一点的方法是应用以下规则。

块样式从不依赖于页面上的其他元素
块应该有一个简单、简短的名称并避免 _ 或 - 个字符
设置元素样式时，使用 blockname__elementname
样式修饰符时，使用 blockname--modifiername 和 blockname__elementname--modifiername
具有修饰符的元素或块应继承其正在修改的块或元素的所有内容，但修饰符应该修改的属性除外

代码示例

如果您将 BEM 应用于您的表单元素，您的 CSS 选择器应该看起来像这样：

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

对应的 HTML 应该是这样的：

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

你应该使用 BEM 吗？

BEM 在被有影响力的 CSS 大师如 Harry Roberts. It is especially popular in combination with OOCSS and SMACSS (which are all really just variations on the same principles of how to write modular CSS). And modular CSS does come with quite a few advantages 推广之后，在美国和西欧的 Web 开发人员中获得了相当大的吸引力。然而，模块化 CSS 可能非常冗长，尤其是 BEM 通常被认为非常丑陋。

最终，这完全取决于您的代码的用途以及将来还有谁会阅读和修改您的代码。对于任何具有大型代码库和多个维护者的项目，我肯定会推荐模块化 CSS，但这并不意味着您必须遵循 BEM 命名约定或严格应用 OOCSS/SMACSS 组件化原则。

如果您的代码由已经有 BEM/OOCSS/SMACSS 经验的开发人员维护的可能性很大，您可能希望选择这些方法中的一种或多种并对它们的应用严格，只是因为这将使与这些开发人员的协作变得更加容易。如果不是，那么严格遵守这些特定约定中的任何一个都没有什么好处，您应该随意选择自己的命名约定和 BEM/OOCSS/SMACSS 上的变体。最后，任何标准的有用性在很大程度上取决于实际使用它的人。

什么是 BEM 方法论？

What is BEM methodology?

css

css-selectors

bem

什么是 BEM？

代码示例

你应该使用 BEM 吗？