수정 된 구성 요소의 스타일링 어린이

Question

팀과 저는 BEM-ish (우리는 this article을 출발점으로 사용)를 구현하기 시작했습니다. 지금까지 읽은 것은 말이되는 것 같습니다. 머리를 감싸는 한 가지 큰 문제는 수정 된 구성 요소의 자식 스타일을 지정하는 방법입니다.

예를 들어 .avatar 및 .avatar--alternate 구성 요소/수정자가 있다고 가정 해 보겠습니다. 대안의 배경은 아마도 흰색 대신 검정색 일 것입니다. 대체품의 머리글 스타일을 지정하기 위해 CSS 선택기를 사용해야합니까? 이유는 무엇입니까?

나는 여기에 시나리오를 배치 한 : 나는이 제목 스타일을 가장 구체적인 방법이며 가장 "확장"또는 "미래 것으로 보인다 때문에 내 창자가 나에게 B를 말하고있다

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

이러한 모든 옵션이 정확합니다.

.avatar-heading이 항상 DOM 트리에서 .avatar--dark의 하위 인 경우 C를 지정합니다.

구성 요소가 반복적으로 내부에 포함되지 않는다고 확신 할 때 A를 사용하십시오.

그렇지 않으면 B를 사용하십시오.

---

NB :

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