I read BEM and some questions have appeared:

"The block should not affect its surroundings, i.e. the block should not specify external geometry (in the form of indents, borders affecting dimensions) and positioning." Those. 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 simply and beautifully reversed in the examples? https://ru.bem.info/methodology/key-concepts/ section "Free movement".

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

But in terms of HTML, 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 other blocks are nested)

And if in css at these blocks float will be installed? How to change these blocks in some places in this case without changing css?

  • Т.е. я не имею права пользоваться такими вещами для блока как margin, padding, border, position, float и т.д.??? - And how then? The power of thought? - Air
  • It’s worth acting on the situation, as @zhurof already said, you shouldn’t stick to BEM by 100%. - meine

1 answer 1

Use mixes.

See: .logo , .search and .auth - blocks. They do not set the positioning. This allows you to use them in other places on the page without redefining the styles. For example, add .logo to the basement.
But if you add the class head__logo , you get the element of the .head block, which can already be positioned with might and main

 .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>

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