Some questions about BEM

Question

Some questions about BEM

I'm reading BEM and I have some questions:

"The block should not affect its environment, i.e. the block should not be set external geometry (in the form of margins, borders that affect the size) and positioning. " I.e. I do not have the right to use such things for the block as margin, padding, border, position, float, etc.???

How then are they so easily and beautifully swapped in the examples? https://ru.bem.info/methodology/key-concepts/ section "Free movement".

They give a beautiful example with the Head block block inside which it is very easy and not forced to move 3 more blocks logo, search, auth. "So, for example, the logo and the authorization form can be swapped. At the same time, you do not need to make changes to the CSS or JavaScript code of the block."- said in the example.

But from the HTML point of view, we have the following code

<div class="headblock">
    <div class="logoblock"></div>
    <div class="searchblock"></div>
    <div class="authblock"></div>
</div>

(everything is fine, everything is beautiful. We have a block in which others are nested blocks)

And if these blocks are set to float in css? How can I swap these blocks without changing the css in this case?

1

html css вёрстка бэм

Author: Дмитрий Гаврилов, 2019-03-29

Source

1 answers

score 1 · Answer 1

Use mixes.

Watch this: .logo,.search and .auth - blocks. We do not set their positioning. This allows you to use them in other places on the page without overriding the styles. For example, add .logo to the basement.
But if you add the head__logo class to .logo, you get an element of the .head block that can already be positioned with all its might

.logo{
  width:30px;
  height:30px;
  background:blue;
}
.search{
  width:100px;
  height:20px;
  background:red;
}
.auth{
  width:30px;
  height:30px;
  background:green;
}
.head{
  display:flex;
  align-items:center;
  padding:10px;
  border:1px solid;
}
.head__logo{
  margin:0 20px 0 0;
}
.head__search{
  margin:0 auto 0 0;
}

<div class="head">
    <div class="logo head__logo"></div>
    <div class="search head__search"></div>
    <div class="auth head__auth"></div>
</div>

P.S. Tip: do not bother with strict compliance with BEM to the detriment of logic. Look at the main page on the Yandex page, there is even inheritance in the selectors.