A
A
Adex2017-09-02 20:48:58
css
Adex, 2017-09-02 20:48:58

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

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 the question

In order to leave comments, you need to log in

2 answer(s)
D
dom1n1k, 2017-09-03
@Adex

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.

A
Alexander, 2017-09-03
@kentuck1213

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;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question