Search code examples
htmlcsssyntaxnaming-conventionsbem

Unsure of correct BEM style syntax

Let's say I have a product within a collection. Is it appropriate to call the product "feature-collection__product" so it's still an element within the block of "feature-collection" or call it "feature-collection-product" so it becomes it's own block, as it has other elements within it, or something different.

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

OR

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

  • Most likely the correct answer is both:

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

    The situation when you have different entities on the same DOM node is called mix. In this case it's reasonable to have independent block product and also an element of feature-collection to set some styling for production inside feature-collection.

    For more info about mixes please take a look at https://en.bem.info/methodology/key-concepts/#mix and https://en.bem.info/methodology/faq/#mixes