How to set block positioning according to BEM?

Question

Layout

The Yandex documentation on BEM says "The block should not affect its environment, i.e. the block should not be given external geometry (in the form of indents, borders that affect the size) and positioning." And how to set the block its position on the page?

Answer 1

To do this, we use mixes for this block. For example our block

<div class="parent">
  <ul class="menu-list">
    <li class="menu-list__item">1</li>
    <li class="menu-list__item">2</li>
    <li class="menu-list__item">3</li>
  </ul>
</div>

We need to position the "menu-item" block. We mix "menu-item parent__menu-item" and already "parent__menu-item" sets the positioning we need, since it is an element of the "parent" block.

<div class="parent">
  <ul class="menu-list parent__menu-list">
    <li class="menu-list__item">1</li>
    <li class="menu-list__item">2</li>
    <li class="menu-list__item">3</li>
  </ul>
</div>