Question

我最近听说过BEM方法。

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

Answer 1

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

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

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

阻止菜单 元素：项 修改器：水平，垂直

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

从代码中可以看出，元素与带有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代表Blocks, Elements and Modifiers。这是一种最初由俄罗斯科技公司Yandex构思的方法。同样的意思是，BEM方法论将HTML和CSS代码组件化为三种类型的组件：

阻止：独立实体，它们本身就是有意义的。示例包括header，container，menu，checkbox＆amp; textbox
元素：部分块没有独立含义且在语义上与其块相关联。例如menu item，list item，checkbox caption＆amp; header title
修饰符：块或元素上的标志，用于更改外观或行为。示例包括disabled，highlighted，checked，fixed，size big＆amp; 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在美国和美国之间获得了相当大的吸引力。西欧网络开发者在被Harry Roberts等有影响力的CSS专家推广之后。它特别受欢迎in combination with OOCSS and SMACSS（这些都是关于如何编写模块化CSS的相同原则的变体）。模块化CSS does come with quite a few advantages。但是，模块化CSS可能非常冗长，特别是BEM通常被认为非常难看。

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

如果已经具有BEM / OOCSS / SMACSS经验的开发人员维护代码的可能性很大，那么您可能想要选择一种或多种这些方法并严格执行其应用程序，因为它会使与这些开发人员的合作变得更加容易。如果没有，严格遵守任何特定约定几乎没有优势，您应该随意选择自己的命名约定和您自己的BEM / OOCSS / SMACSS变体。最后，任何标准的用处在很大程度上取决于谁实际使用它。

什么是BEM方法？

2 个答案:

什么是BEM？

代码示例

你应该使用BEM吗？