遵循BEM约定编写CSS Flex代码的最佳方法是什么？

Question

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

但是，我不太清楚哪种方法最好。我有多个具有不同样式的flex div，如果我在类中定义每种样式，那真的很重复。但是然后我最终会为每种弹性样式使用单独的类吗？

这是一个简化的示例：

.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个班级。最好的方法是什么？

Answer 1

您的代码完全有效！

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

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

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