什么是BEM方法？

Question

我最近听说过BEM方法.

• BEM方法的用途究竟是什么？
• BEM以何种方式使我们的工作更轻松？
• 使用BEM是一个好习惯吗？

Answer 1

BEM是一种命名方法.它代表Block Element Modifier,它的目标是促进模块化,使样式和类更容易维护.

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

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

阻止:菜单 元素:项目 修改器:水平,垂直

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

希望能帮助到你 :)