G
G
greencost2021-04-22 12:20:32
Layout
greencost, 2021-04-22 12:20:32

Two questions on BEM - how to name and whether to take out the container class separately?

Good afternoon. There are two, it seems to me, simple questions related to BEM, but I just can’t decide how to do it better.

1) There is a "two-story header", where contacts are a separate block, and a logo and a menu are separate. Something like this:
60813caf8c4d9830902656.png
What do you think is the best name for these blocks? .header-top and .header-lower ?

2) There is any block whose structure in its essence is container > row > col*(items). How best to organize it with t.z. BEM?

<div class="news">
  <div class="news__container">
    <div class="news__row">
      <div class="news__item">
        <!-- контент -->
        <!-- стили подтягиваем через sass -->
      </div>
    </div>
  </div>
</div>

<!-- ИЛИ -->

<div class="news">
  <div class="container">
    <div class="row">
      <div class="news__item">
        <!-- контент -->
      </div>
    </div>
  </div>
</div>

<!-- ИЛИ -->

<div class="news">
  <div class="news__inner container">
    <div class="news__row row">
      <div class="news__item">
        <!-- контент -->
      </div>
    </div>
  </div>
</div>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vitaly Pershin, 2021-04-22
@greencost

.header-top and .header-lower

It's better not to do that. Try not to use adjectives. The meaning of BEM is reuse and what was at the top today can be at the bottom and vice versa, after such transformations, when top is somewhere in the center, at least there will be dissonance.
It is more logical to put them into 2 independent blocks, names such as panel, bar, info, navigation are perfect , if you want to reserve these names for other purposes, you can use prefixes and combinations ibar, i-bar, info-panel . Both of these blocks can be wrapped in a single header and mixed with class="header__panel panel" , although I would separate them completely, since the top panel can obviously be reused somewhere in the footer.
2) There is any block whose structure in its essence is container > row > col*(items). How best to organize it with t.z. BEM?

Here you need to see what to work with, but in this context it is better to use a mix:
<div class="news">
  <div class="news__container container">
    <div class="news__row row">
      <div class="news__item">
        <!-- контент -->
      </div>
    </div>
  </div>
</div>

Thus, we can modify row and container in the context of the required block and understand the purpose of the classes.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question