在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>

这种写法完全不符合BEM的标准实践，核心问题有三个：

• Block的独立性被破坏：BEM的核心是模块化，每个Block是独立可复用的单元。把两个Block绑在同一个元素上，会让两个模块的样式逻辑深度耦合，后续修改任意一个Block的样式，都可能意外影响另一个，彻底违背了模块化的初衷。
• Element的归属彻底混乱：BEM规定block__element这种命名的元素，必须是对应Block的专属组成部分，只能依赖所属Block存在。你示例里block-2__element2既放在block-1__element1的层级下，又和block-1__element3共用一个元素，其他开发者根本没法判断这个元素到底属于哪个模块，后期维护简直是灾难。
• Modifier容易引发冲突：同时给两个Block加Modifier，很大概率会出现样式优先级打架的情况，或者两个Modifier的效果互相抵消/干扰，出现完全预期外的样式，调试起来特别麻烦。

正确的做法 #

如果需要组合多个模块的效果，推荐两种方式：

1. 嵌套独立Block：让一个Block作为另一个Block的子元素，各自保持完整的模块结构，互不干扰：

<div class="block-1 block-1_modifier">
     <div class="block-1__element1">
           <div class="block-1__element3">
               <!-- 把block-2完整嵌套进来，保持它的独立结构 -->
               <div class="block-2 block-2_modifier">
                   <div class="block-2__element2"></div>
               </div>
           </div>
     </div>
     <div class="block-1__element2">
         <div class="block-1__element4"></div>
     </div>
</div>

2. 谨慎使用混合（Mix），但严格区分Element归属：如果一定要在同一个元素上应用多个Block的样式，只绑定Block类名，绝对不要跨Block混用Element。每个Element严格属于自己的Block：

<div class="block-1 block-2 block-1_modifier block-2_modifier">
     <div class="block-1__element1">
           <div class="block-1__element3"></div>
     </div>
     <!-- block-2的Element单独维护自己的结构 -->
     <div class="block-2__element1">
           <div class="block-2__element2"></div>
     </div>
     <div class="block-1__element2">
         <div class="block-1__element4"></div>
     </div>
</div>

这种方式虽然允许Block混合，但仍要注意样式优先级的问题，能不用就尽量不用，优先选择嵌套的方式。

内容的提问来源于stack exchange，提问作者sam sam