What is the best way to use BEM in flex layout?

Question

css

I decided to try to make a page using flex, what is the best way to use the BEM methodology here? Do additional containers/wrappers (xs how to name them) with flex properties or extend existing classes like .b-block .b-block_flex?

Answer 1

It all depends on whether the flex cells will have elements (used only in this context) or blocks (can be reused somewhere else).
In the first case, everything is simple, something like this:

<div class="container">
  <div class="container__header"> ... </div>
  <div class="container__body"> ... </div>
  <div class="container__footer"> ... </div>
</div

.container {
  display: flex;
  ...
}
.container__header {
  flex: 1 1 auto;
}
.container__body {
  flex: 1 1 auto;
}
.container__footer {
  flex: 1 1 auto;
}

In the second case, yes, additional wrappers will be useful, on which flex properties will be hung. The reason is that the block doesn't need to know anything about its position on the page, it only needs to know its own device. And the situation is controlled by a higher level. More or less like this:

<div class="container">
  <div class="container__header">
    <div class="some-header-block"> ... </div>
  </div>
  <div class="container__body">
    <div class="some-body-block"> ... </div>
  </div>
  <div class="container__footer">
    <div class="some-footer-block"> ... </div>
  </div>
</div

In general, during the layout process, you need to ask yourself the question - can this block be used somewhere else? Let not right now, but at least theoretically in the future? If so, make wrappers.

Answer 2

Why is it needed there? Create base classes, I do it like this:

.flex-container{
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.flex-item{
margin: 15px;
}