问遵循BEM约定编写css flex代码的最佳方式是什么？

EN

.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>