3

One of the features of BEM Block is:

The block shouldn't influence its environment, meaning you shouldn't set the external geometry (margin) or positioning for the block.

Here is the link to this article

Then how to set external geometry or positioning for BEM block?

roc.an
  • 43
  • 6

2 Answers2

1

External geometry is set by the parent block with the use of mixes. Read this for details: https://en.bem.info/methodology/css/#external-geometry-and-positioning

Noname
  • 4,432
  • 2
  • 10
  • 17
0

In BEM a block is:

A functionally independent page component that can be reused.

Set "external geometry or positioning" in the page where the component is being used. In this example you see a single component used 4 times. 

<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;
}

see it in action here:

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

The BEM component has no concept of it's size on the page. Only that it should use 100% of the width it is given. It has no concept of margin or positioning on the page because that is not it's responsibility - that is for the page to decide.

Think of your BEM component as dumb css components that only know about themselves. Your pages are smart containers that hold the grand vision and the understanding of the design. With that knowledge the pages can orchestrate a layout and position all your dumb components.

luetkemj
  • 171
  • 7
  • Thanks a lot. But loc1, loc2 and loc3 are also the "block" set "external geometry or positioning". Must I declare another block to layout it which is a functionally independent page component but won't be reused? I think it is superfluous. – roc.an Feb 19 '18 at 08:02
  • In the end something is going to have to have the knowledge of how your page is laid out. You could choose to use css grid which might reduce your wrapping divs (loc1, loc2, loc3) if you are smart about it and possibly add some modifier classes to your BEM components (but that may also be "external geometry or positioning") Paleo has a good link below that may make more sense for you - it's a nice clean explanation. BEM is an idealistic design pattern that has helped me write better css. But I'm not gonna lie - sometime you have to fudge things. No plan survives contact with enemy... – luetkemj Feb 20 '18 at 11:20