Question

BEM Block的一个功能是：

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

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

Answer 1

在BEM中，一个块是：

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

设置＆＃34;外部几何或定位＆＃34;在使用该组件的页面中。在此示例中，您将看到使用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组件。您的页面是智能容器，具有宏伟的视野和对设计的理解。有了这些知识，页面就可以编排布局并定位所有愚蠢的组件。

Answer 2

外部几何体由父块使用混合设置。详情请阅读：https://en.bem.info/methodology/css/#external-geometry-and-positioning

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

2 个答案: