bem css big confusion

Question

** writing multiple block on same element is right approach in BEM ? *

  <div class="block-1 block-2 block-1_modifier block-2_modifier">
       <div class="block-1__element1">
             <div class="block-1__element3 block-2__element2">
             </div>
       </div>
       <div class="block-1__element2">
           <div class="block-1__element4">
           </div>
       </div>
  </div>

Answer 1

Yes, this is partially correct, although your naming convention above should be more like:

• block-1 SHOULD NOT HAVE block-2
• Your single nest level for block-1__element3 is good.

Don't do block-1__element2__element3 because that creates messy nesting. Only nest one level deep - like the example you indicated. This is a tidier approach to BEM which was overlooked by those who used it.

See corrections:

 <div class="block-1 block-1--modifier-1 block-1--modifier-2">
       <div class="block-1__element1">
       </div>
       <div class="block-1__element2">
           <div class="block-1__element3"> </div>
           </div>
       </div>
  </div>