Search code examples
cssbem

BEM element and block on the same DOM node


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.


Solution

  • 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.