БЭМ: автономный блок внутри блока

Question

Например, у меня есть автономный блок под названием:

.main-company-logo {
  background: url(../images/logo_company.png);
  width: 88px;
  display: block;
  text-indent: -9999999px;
  height: 60px;  
} 

Этот блок находится в заголовке, но также может быть где угодно. Теперь, если он находится в заголовке, он должен быть перемещен влево, а также иметь границу. Если это так, это правильный способ сделать это:

.header-main { [properties] }
  .header-main .main-company-logo {
    float: left;
    border: 1px solid #FFF;
  }

Или согласно БЭМ:

.main-company-logo { [properties] }
  .main-company-logo--main-header {
    float: left;
    border: 1px solid #FFF;
  }

Какой из двух лучше?

Answer 1

Сначала все в порядке. Но если вы хотите полностью контекстно-независимое решение, я предлагаю вам создать контейнер в заголовке для логотипа с плавающей точкой и рамкой и поместить туда логотип.

.header-main { [properties] }
.header-main--logo {
    float: left;
    border: 1px solid #FFF;
}
.main-company-logo { [properties] }

и использовать его как

<div class="header-main">
    <div class="header-main--logo">
        <img class="main-company-logo"/>
    </div>
</div>

Другой способ должен использовать миксин, как это

<div class="header-main">
    <img class="header-main--logo main-company-logo"/>
</div>

с таким css

.header-main { [properties] }
.header-main--logo.main-company-logo {
    float: left;
    border: 1px solid #FFF;
}
.main-company-logo { [properties] }