Всем привет!

Начал изучать БЭМ 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;
}

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