如何为BEM块设置外部几何图形或定位？

Posted 2021-04-27

BEM Block的一个特点是：

该块不应影响其环境，这意味着您不应设置块的外部几何（边距）或定位。

Here is the link to this article

那么如何为BEM块设置外部几何或定位？

答案

在BEM中，一个块是：

功能独立的页面组件，可以重复使用。

在使用组件的页面中设置“外部几何体或定位”。在此示例中，您将看到使用4次的单个组件。

<div class="wrapper">
  <div class="BEM">I am a single BEM component</div>
  <div class="loc1">
    <div class="BEM">I am a single BEM component</div>    
  </div>
  <div class="loc2">
    <div class="BEM">I am a single BEM component</div>
  </div>
  <div class="loc3">
    <div class="BEM">I am a single BEM component</div>  
  </div>
</div>

.BEM {
  width: 100%;
  background: lightblue;
  padding: 20px;
  border: 1px solid gray;
}

.loc1 {
  width: 50%;
  margin: 20px;
}

.loc2 {
   width: 30%;
   margin: 0 auto;
}

.loc3 {
  position:  absolute;
  bottom: 0;
}

看到它在行动：

https://codepen.io/luetkemj/pen/BYJEGp

BEM组件在页面上没有概述它的大小。只有它应该使用100％的宽度。它没有页面上的保证金或定位的概念，因为这不是它的责任 - 这是页面决定的。

将您的BEM组件想象成只知道自己的哑巴css组件。您的页面是智能容器，具有宏伟的视野和对设计的理解。有了这些知识，页面就可以编排布局并定位所有愚蠢的组件。