如何为 BEM 块设置外部几何或定位？答案

【问题标题】：How to set external geometry or positioning for BEM block?如何为 BEM 块设置外部几何或定位？
【发布时间】：2018-02-18 07:55:26
【问题描述】：

BEM Block 的特点之一是：

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

Here is the link to this article

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

【问题讨论】：

你能举个例子吗？

标签： css bem

【解决方案1】：

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

【讨论】：

【解决方案2】：

在 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 组件。您的页面是包含宏伟愿景和对设计的理解的智能容器。有了这些知识，页面就可以编排布局并定位所有愚蠢的组件。

【讨论】：

非常感谢。但 loc1、loc2 和 loc3 也是“块”集“外部几何或定位”。我必须声明另一个块来布局它，它是一个功能独立的页面组件，但不会被重用？我认为这是多余的。
最终，您必须了解页面的布局方式。你可以选择使用 css 网格，如果你很聪明，它可能会减少你的包装 div（loc1、loc2、loc3），并且可能会向你的 BEM 组件添加一些修饰符类（但这也可能是“外部几何或定位”）古下面有一个很好的链接，可能对您更有意义 - 这是一个很好的干净解释。 BEM 是一种理想主义的设计模式，它帮助我编写了更好的 css。但我不会撒谎——有时你必须捏造一些东西。没有计划在与敌人的接触中幸存下来......