Некоторые вопросы по БЭМ

194

27 декабря 2019, 07:30

Читаю БЭМ и появились некоторые вопросы:

"Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование". Т.е. я не имею права пользоваться такими вещами для блока как margin, padding, border, position, float и т.д.???

Каким образом тогда их так просто и красиво меняют местами в примерах? https://ru.bem.info/methodology/key-concepts/ раздел "Свободное перемещение".

Дают красивый пример с блоком Head block внутри которого очень легко и не принужденно двигают еще 3 блока logo, search, auth. "Так, например, логотип и форму авторизации можно поменять местами. При этом вносить изменения в CSS или JavaScript-код блока не нужно." - сказано в примере.

Но с точки зрения HTML мы имеем следующий код

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

(все отлично, все красиво. Мы имеем блок в который вложены другие блоки)

А если в css у этих блоков будут установлены float? Как без изменения css поменять эти блоки местами в таком случае?

Answer 1

Используйте миксы.

Смотрите: .logo,.search и .auth - блоки. Им позиционирование не задаём. Это позволяет без переопределения стилей использовать их в других местах на странице. Например, добавить .logo в подвал.
Но если добавить к .logo класс head__logo, то получается элемент блока .head, который уже вовсю можно позиционировать

.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. Совет: не стоит заморачиваться строгим соблюдением БЭМ в ущерб логике. Посмотрите на главной странице Яндекса, там даже наследование в селекторах есть.