<div class="header">
<div class="header__left"></div>
<div class="header__right right-lite">
<div class="right-lite__control"></div>
<div class="header__btn"></div>
</div>
</div>
<div class="header">
<div class="container">
<div class="header__logo"></div>
<nav class="header__nav"></nav>
</div>
</div>
header__btn
никак не должен зависеть от right-lite
.header__right
- про позиционирование внутри header, никак не должно быть связанно с right-lite
<div class="header__right right-lite">
- яркий пример классического бэм микса. То есть по факту Вам нужен блок right-lite
, но для позиционирования внутри header Вы миксуете его как элемент header__right
display: flex
. Я в таком случае делаю микс. Блок container отвечает за ширину, а элемент header__containe
отвечает за display: flex
.container {
width: 100%;
max-width: 1208px;
}
.header {
&__container {
display: flex;
}
}
<div class="header">
<div class="header__container container">
<div class="header__logo"></div>
<nav class="header__nav"></nav>
</div>
</div>
<header class="header">
<div class="wrapper header__wrapper"></div>
</header>
<div class="block">
<div class="container">
<div class="block__container content"></div>
</div>
</div>
<div class="block">
<div class="container block__container content"></div>
</div>
.container {
padding: 0 15px;
}
.content {
padding-top: 40px;
}
.block__container {
padding-bottom: 40px;
}
Если требуется вынести CSS-свойство за пределы одного блока и применять его к разным БЭМ-сущностям в проекте, необходимо создавать отдельный блок, реализованный в технологии CSS. После чего совместить реализацию разных блоков с помощью миксов.