In BEM can I avoid reusing the same namespace inside a Block?

[pishonx]

Hi team, I am new using the BEM methodology.- and I have a question that hopefully you can help me out with Thanks!

Based on the following case:

What is wrong or against BEM methodology writing the example in SASS like this:

DOM

<div class='block'>
    <div class='__elem1'>
        <div class='__elem2'></div>
    </div>
    <div class='__elem3'></div>
</div>

SASS

.block {
   .__elem1 { }
   .__elem2 { }
   .__elem3 { }
}

I personally would avoid reusing the block namespace, since an element is already tight to is block. Similarly to modifiers, I would write something like this:

SASS

.block {
   &.--xmas { }
   &.--summer { }
   &.--dark{ }
}

DOM

<div class='block --xmas'>
    <div class='__elem1'>
        <div class='__elem2'></div>
    </div>
    <div class='__elem3'></div>
</div>

[tadatuta]

The main answer is the support of mixes: it should be possible to have elements of different blocks on the same DOM node. E.g.

<div class="block1 block2">
    <div class="__elem1"
</div>

can you guess is it elem1 of block1 or block2?

For other advantages see https://en.bem.info/methodology/faq/#why-include-the-block-name-in-modifier-and-element-names

[gmkhussain]

Don’t go so deep block__elem1__elem2, don’t try to mimic the DOM tree.

see example of event > event__detail

<div class="block event">
    <div class="block__elem1 event__detail">
       <div class="block__elem1__elem1 event__location"></div>
       <div class="block__elem2__elem2 event__date"></div>
   </div>
    <div class="block__elem2">
       <div class="block__elem2__elem1 event__date"></div>
   </div>
</div>