Укладка детей модифицированного компонента

Question

Моя команда и я начали реализовывать что-то вроде BEM-ish (в качестве отправной точки мы использовали this article). То, что я читал, кажется, имеет смысл. Одна большая проблема, с которой я обволакиваю голову, - это стиль детей модифицированных компонентов.

Например, у меня есть .avatar и .avatar--alternate компоненты/модификаторы. Возможно, фон на альтернативе черный, а не белый. Что такое CSS-селекторов, которые я должен использовать для создания заголовков в альтернативе и почему?

Я изложил сценарии здесь:

<div class="avatar"> 
    <h2 class="avatar-heading">Lorem ipsum...</h2> 
</div> 

<div class="avatar avatar--dark"> 
    <h2 class="avatar-heading">Lorem ipsum...</h2> 
</div> 

// _typography.scss 
h1 { 
    color: #000; 
} 

// _avatar.scss 
.avatar { 
    background: #fff; 
} 
.avatar--dark { 
    background: #000; 
} 
.avatar-heading { 
    color: #222; 
} 


// option A 
.avatar--dark { 
    .avatar-heading { 
    color: #fff; 
    } 
} 

// option B 
.avatar-heading--dark { 
    color: #fff; 
} 

// option C? 

Моя кишка говорит мне Б, потому что это наименее специфический способ стилизовать заголовок и, как представляется, наиболее «масштабируемый» или «будущее -доказательство». С другой стороны, довольно убедительным, потому что я мог бы потенциально иметь .avatar-subHeading, а также, и, возможно, некоторые пункты в этом случае я мог бы начать страдать от classitis (например <h1 class="avatar-heading avatar-heading--dark">)

Answer 1

Вариант C (?):

.avatar--dark > .avatar-heading { 
    color: #fff; 
} 

Все эти параметры верны.

Предпочитает C, если .avatar-heading всегда является ребенком .avatar--dark в дереве DOM.

Предпочитаете A, когда вы уверены, что компонент никогда не будет рекурсивно включен внутрь.

Использовать B в противном случае.

---

NB: В методологии БОЙ, второй div должен иметь как класс компонента avatar и класс модификаторов avatar--dark:

<div class="avatar avatar--dark">