CODEWITHSUNDEEP
cssbem
negativefix
negativefix

Reputation: 557

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.

Upvotes: 3

Views: 1007

Answers (1)

Paleo
Paleo

Reputation: 23692

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.

Upvotes: 3

Related Questions