올바른 BEM 스타일 구문이 확실하지 않습니다.

Question

컬렉션에 제품이 있습니다. "feature-collection__product"라는 제품을 "feature-collection"의 블록 내에있는 요소로 사용하거나 "feature-collection-product"라고 부르는 것이 적절합니까? 그 안에 다른 요소가 있기 때문에 자체 블록이됩니다. , 또는 뭔가 다른.

<div class="feature-collection"> 

    <div class="feature-collection__product"> 
     <h2 class="feature-collection__product-title"></h2> 
     <h2 class="feature-collection__product-price"></h2>  
    </div> 

</div> 

또는

<div class="feature-collection"> 

    <div class="feature-collection-product"> 
     <h2 class="feature-collection-product__title"></h2> 
     <h2 class="feature-collection-product__price"></h2>  
    </div> 

</div> 

Answer 1

는 대부분의 경우 정답은 둘 다 :

<div class="feature-collection"> 
    <div class="feature-collection__product product"> 
     <h2 class="product__title"></h2> 
     <h2 class="product__price"></h2>  
    </div> 
</div> 

같은 DOM 노드에 다른 요소를 가지고있는 상황은 혼합이라고합니다. 이 경우 독립적 인 블록 제품과 feature-collection의 요소를 사용하여 기능 컬렉션 내에서 프로덕션을위한 스타일링을 설정하는 것이 합리적입니다.

은 믹스에 대한 자세한 정보를 위해 내가 볼 https://en.bem.info/methodology/key-concepts/#mix 및 https://en.bem.info/methodology/faq/#mixes