V
V
VL54382020-05-16 18:50:02
BEM
VL5438, 2020-05-16 18:50:02

Can the same BEM blocks be used on the same or different pages without some of their elements?

It is known that the elements of the BEM block cannot be used in isolation from the block, but can the same blocks on different pages or within the same page be used without some of their elements, or nested blocks OR with a changed sequence of these same elements OR, for example, a nested block in one place it is also an element (mix), and in another place it is only a nested block (that is, in fact, again, the absence of an element)?

Example:

On the main page, we have a header block (header), which contains two other blocks (header-top and header-bottom), which are also its elements:

<header class="header">
  <div class="header-top header__header-top">
    <a class="logo header-top__logo" href="#">
      <img class="logo__img" src="#" alt="Логотип">
    </a>
    <!-- ... -->
  </div>
  <div class="header-bottom header__header-bottom">
    <nav class="header-bottom__menu">
      <ul class="header-bottom__menu-items">
        <li class="header-bottom__menu-item"><a href="#" class="header-bottom__menu-link">...</a></li>
        <li class="header-bottom__menu-item"><a href="#" class="header-bottom__menu-link">...</a></li>
        <li class="header-bottom__menu-item"><a href="#" class="header-bottom__menu-link">...</a></li>
      </ul>
    </nav>
    <!-- ... -->
  </div>
</header>


And on all other pages, we use the same BEM header block, but it no longer has a nested header-bottom block (which was also an element of the header block):

<header class="header">
  <div class="header-top header__header-top">
    <a class="logo header-top__logo" href="#">
      <img class="logo__img" src="#" alt="Логотип">
    </a>
    <!-- ... -->
  </div>
</header>


Are there any errors in BEM class names in this example?

UPD: I'm interested in exactly the strict compliance with the BEM methodology in order to know their requirements.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
V
Vitaly Pershin, 2020-05-16
@VL5438

used without some of its elements,

Of course, a block can be without elements at all.
OR with a changed sequence of these very elements

Of course you can, and if it is impossible to change something without violating the standard behavior, a modifier or mix is ​​applied.
for example, a nested block in one place is also an element (mix)

Yes, any block can be a mix of another block or element.
In this example, I used the block names "header-top" and "header-bottom", is this a mistake?

Here, of course, you need to study in context, but header-1 and header-2 will be much more practical. If you swap header-top and header-bottom, which in fact should be possible at least in theory, then because of such names there will be complete dissonance, while the abstract names header-1 and header-2 are of no use to us oblige and do not restrict anything.
You can also use a prefix for example t-header b-header, intuitively we can imagine that this is top and bottom, but in fact this is just an abstract header name

B
BigSmoke, 2020-05-16
@BigSmoke

> and whether they
can.
> in this example there are no errors?
No.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question