遵循 BEM 约定编写 css flex 代码的最佳方法是什么？答案

【问题标题】：What is the best way to write css flex code following BEM convention?遵循 BEM 约定编写 css flex 代码的最佳方法是什么？
【发布时间】：2019-01-04 02:53:22
【问题描述】：

我一直在阅读有关 BEM 的信息，我想开始实施它。

但是，我不太清楚什么是最好的方法。我有多个具有不同样式的 flex div，如果我在类中定义每种样式，这确实是非常重复的。但是我最终会为每种 flex 样式使用单独的类吗？

这是一个简化的例子：

.cont {
  border: 1px solid black;
  margin: 10px;
  display: flex;
  padding: 50px
}

.cont--justify-start {
  justify-content: flex-start;
}

.cont--direction-column {
  flex-direction: column;
}

.cont--justify-center {
  justify-content: center;
}

.cont--justify-end {
  justify-content: flex-end;
}

.square {
  width: 20px;
  height: 20px;
}

.square--black {
  background: black;
}

.square--blue {
  background: blue;
}

.square--red {
  background: red;
}

.square--green {
  background: green;
}

<div class="cont cont--justify-center">
  <div class="square square--black">
  </div>
  <div class="square square--blue">
  </div>
</div>

<div class="cont cont--justify-start cont--direction-column">
  <div class="square square--red">
  </div>
  <div class="square square--blue">
  </div>
</div>

<div class="cont cont--justify-end">
  <div class="square square--red">
  </div>
  <div class="square square--green">
  </div>
</div>

这样一个 div 最终可能有 5-6 个类。最好的方法是什么？

【问题讨论】：

我认为--justify-content-center 就足够了。它是一个修饰符，所以不需要在它之前放置一个块。 getbem.com/naming & 它也应该是 --red --green

标签： html css flexbox bem

【解决方案1】：

您的代码完全有效！

<div class="cont cont--justify-start cont--direction-column">

您必须使用块或元素名称，后跟修饰符。

请查看官方文档，他们添加了非常好的示例。有些甚至与您的问题相似：https://en.bem.info/methodology/block-modification/

【讨论】：