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

Question

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)?

score 7 · Accepted Answer · answered Nov 02 '17 at 11:47

7

That's absolutely valid and is called mix:

answered Nov 02 '17 at 11:47

tadatuta

the above code is not a mix , you shouldn't use two elements of the same block in the same tag – Boogie Sep 24 '21 at 08:23

score -1 · Answer 2 · answered Sep 24 '21 at 08:22

I don't think you should. You could add mixin like:

<div class="item">
  <div class="item__section u-title"> ... </div>
  <div class="item__section u-description"> ... </div>
</div>

but don't use two elements of the same block in the same tag because you can end up with specificity problems

2 Answers2