What is the best way to write css flex code following BEM convention?

Question

I have been reading about BEM and I would like to start implementing it.

However, I am not very clear what would be the best approach. I have multiple flex divs with different styles, it really is very repetitive if I define each style in the class. But then will I end up using separate classes for each flex style?

This is a simplified example:

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

This way one div might end up having 5-6 classes. What is the best way to do this?

I think just `--justify-content-center` is good enough. It's a modifier, so no need to put a block before it. http://getbem.com/naming/ & it should also be `--red` `--green` — Toan Lu, Jul 27 '18 at 05:48

score 2 · Answer 1 · answered Jul 27 '18 at 16:25

Your code is perfectly valid!

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

You have to use the block or element name, followed by the modifier.

Please see the official documentation, they have added very nice examples. Some are even similar to your problem: https://en.bem.info/methodology/block-modification/

What is the best way to write css flex code following BEM convention?

1 Answers1