BEM: Автономный блок в блоке

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; 
    } 

Или согласно BEM:

.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> 

с таким КАС

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