3

Is it correct to use element and block classnames on the same DOM node as in the example below?

<div class="b-panel">
   <div class="b-panel__head"></div>
   <div class="b-panel__body"></div>

   <!-- b-nav is an individual block but also element of b-panel -->

   <div class="b-nav b-panel__nav">
      <a href="#" class="b-nav__prev">Prev</a>
      <span class="b-nav__label">Label</span>
      <a href="#" class="b-nav__next">Next</a>
   </div>

</div>

Thanks.

negativefix
  • 517
  • 1
  • 4
  • 9

1 Answers1

3

Yes, it is a mix:

You can also mix an element with a block using BEMHTML templates of a block. Let's specify that each item element from a goods block has the same formatting as a head block. For this you need to mix each item from a goods block with a box block from j library. [source: a tutorial from bem.info]

In your code:

<div class="b-panel">
   <div class="b-nav b-panel__nav"></div>
</div>

The inner DOM element is a mix of the block b-nav and the element b-panel__nav.

Paleo
  • 21,831
  • 4
  • 65
  • 76