Is it OK to apply multiple BEM elements to an html element's class?

Issue

I am structuring the CSS in my web application according to the BEM convention.

I have a block called item and 3 elements: item__section, item__title and item__description.

I am using these BEM classes as follows:

<div class="item">
  <div class="item__section item__title"> ... </div>
  <div class="item__section item__description"> ... </div>
</div>

The item__section element class contains style that we reuse between elements.

Is this valid BEM or should I create a modifier for item__section for each kind of section(title and description)?

Solution

That's absolutely valid and is called mix:

• https://en.bem.info/methodology/key-concepts/#mix
• https://en.bem.info/methodology/css/#mixes

Answered By - tadatuta