css - 什么是 BEM 方法论？

Question

我最近听说了 BEM 方法。

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

Answer 1

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

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

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

block :菜单 元素:元素 修饰语:水平，垂直

通过遵循标准的 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>

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

现在，如果您将菜单上的修饰符从 --horizo​​ntal 更改为 --vertical，则 block 和元素都会选择特定的修饰符样式里面。

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

同时使用像 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

希望对您有所帮助:)