Again about elements nesting

Here what I see on BEM site (https://en.bem.info/methodology/quick-start/#introduction):

Create an element If a section of code can't be used separately without the parent entity (the block).

The exception is elements that must be divided into smaller parts – subelements – in order to simplify development. In the BEM methodology, you can't create elements of elements. In a case like this, instead of creating an element, you need to create a service block.

Here is HTML of the page where that text is written:

<ul class="article__list">
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
</ul>

It's obvious that article__list-item can't be re-used without article__list. Why isn't article__list block then?

6 years ago

skad0

It is really depends on context. For example, if we talking about very simple list like we have in example, it is obvious that creating new block is just make no sense.

But, e.g. you have list as something more complex you can just simply use it as a block and specify some specific staff with mix:

<div class="article">
  <ul class="list article__list">
    <li class="list__item"></li>
  </ul>
</div>

6 years ago

deser

I think it's incorrect. List is naturally block. You can't re-use article__list-item in this site. This markup is confusing, and mixin (is what you've wrote) is to my mind correct. Why I'm asking this is because methodology need to be more strict and prescriptive. Otherwise you'd always think how to create such sort of constructions.

6 years ago

deser

One more example:

<ul class="menu">
    <li class="menu__item">
        <a class="menu__link" href="https://">...</a>
    </li>
</ul>

The problem is in CSS code which doesn't reflect that .menu__link is obliged to be used within .menu__item, it doesn't have sense if used as a child of .menu. In other words, logically, the only what could be inside .menu is .menu__item, nothing else.

So CSS would be confusing when reading by other developers.

6 years ago

ghost

is this correct?

  <nav class="navbar">
    <ul class="navbar__menu menu">
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
    </ul>
  </nav>

In order to leave a comment you need to login.