EN
rodweb
rodweb
20 февраля 2015

Всем привет!

Начал изучать БЭМ CSS. Как я понимаю, блоки должны быть максимально независимы от контекста, в котором они используются., поэтому я при написании блоков выделяю «контекстно-зависимые» стили (margin/padding, переопределения стилей Bootstrap и т.д.) в отдельный блок и навешиваю его вместе с основным блоком на один элемент:

<div class="corp-offer-builder">
  <ul class="pager pull-right corp-offer-builder-ctx__nav"><li class="lh-input corp-offer-builder-ctx__page-num">1 из 2</li></ul>
  <div class="btn-group corp-offer-builder-ctx__button_save"><ul class="dropdown-menu"></ul>
  </div>
</div>
.corp-offer-builder-ctx__nav {
  margin: 0;
}

.corp-offer-builder-ctx__page-num {
  padding: 0 10px;
}

.corp-offer-builder-ctx__button_save .dropdown-menu {
  left: auto;
  right: 0;
}

Как я себе представляю, это помогает отделить блок от контекста и использовать его в других местах. Насколько адекватен такой подход и есть ли какие-то другие, возможно, более правильные подходы?

tadatuta
#tadatuta
20 февраля 2015

@rodweb
Несколько блоков на одном DOM-узле в терминах методологии называется «миксом».
Подход совершенно правильный.