使用BEM约定编写CSS Flex代码的最佳方式是什么？

Question

我一直在研究BEM，希望开始实施它。然而，我不太清楚最佳方式是什么。我有多个具有不同样式的flex divs，如果在类中定义每个样式，那么将会非常重复。但是，我最终会使用单独的类来表示每个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个类。最好的方法是什么？

- Tom Bom

---

我认为只需要使用--justify-content-center就足够了。它是一个修饰符，所以不需要在它之前加上块。http://getbem.com/naming/ 而且它也应该是--red --green。 - Toan Lu

Answer 1

你的代码完全有效！

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

你需要使用块或元素名称，然后跟着修饰符。

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

- Nikolay Mihaylov