什么是 BEM 方法？ [关闭]

我最近听说了 BEM 方法。

• BEM 方法到底有什么用途？
• BEM 在哪些方面让我们的工作变得更轻松？
• 使用 BEM 是一个好的做法吗？

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

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

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

Block: menu Element: item 修饰符：水平垂直

通过遵循标准 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 to --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 https://m.alphasights.com/how-we-use-bem-to-modularise-our-css-82a0c39463b0#.2uvxts71f

希望能帮助到你 ：）