3

I am a beginner in front-end and I try to assimilate the notions of SASS and BEM.

I have great difficulty understanding the naming convention and how it is organized with SASS.

I wrote a product section which contains three div (column) which themselves contain child elements.

I have no idea how to organize the names well. For example the img are children of product__preview, but I'm tempted to name the class product__img .... but it looks like it's not correct? If there are several images in the product section but some of them must be different, how do we handle the names? (product__img seems to be too vague). Do I need to add a product__preview__img class for special cases?

Can you help me correct this block so that I understand the naming correctly?

Thank you in advance!

 <section class="product">
    <img class="product__cover product__item" src="./images/nintendo/marioodyssey/marioodyssey-1.jpg" alt=""
        srcset="">
    <div class="product__preview product__item">
        <img class="product__img" src="./images/nintendo/marioodyssey/marioodyssey-2.jpg" alt="" srcset="">
        <img class="product__img" src="./images/nintendo/marioodyssey/marioodyssey-3.jpg" alt="" srcset="">
        <img class="product__img" src="./images/nintendo/marioodyssey/marioodyssey-3.jpg" alt="" srcset="">
    </div>

    <div class="product__content product__item">
        <h4 class="product__title">Super Mario Odyssey</h4>
        <p><span> Date: </span> 2017</p>
        <p><span> Story: </span> Super Mario Odyssey[b] is a platform game developed and published by Nintendo for
            the Nintendo Switch on October 27, 2017. An entry in the Super Mario series, it follows Mario and Cappy,
            a sentient hat that allows Mario to control other characters and objects, as they journey across various
            worlds to save Princess Peach from his nemesis Bowser, who plans to forcibly marry her. In contrast to
            the linear gameplay of prior entries, the game returns to the primarily open-ended, 3D platform gameplay
            featured in Super Mario 64 and Super Mario Sunshine.[1] </p>
        <p><span> Review: </span></p>
        <button class="product__btn btn-orange-tiger">Add to cart</button>
        <button class="product__btn btn-orange-tiger">Go to cart</button>
        <button class="product__btn btn-orange-tiger">Keep buying</button>
    </div>
</section>
chris
  • 61
  • 3

1 Answers1

2

The structure you have now is perfectly fine and valid. Therefore, you would not want to use product__preview__img. You would be defeating the purpose of BEM if you were to create those kind of selectors as you would be creating complex/unorganised code. If you feel the name is vague, you could try product__img-preview as this still ties in with the block element selector and not a stacked block element selector.

One more thing I could suggest since you are using BEM and to utilise it fully, is to change your modifier class names for the buttons you have to product__btn product__btn--orange as it will help keep your code maintainable as you have the block element selector along side a modifier which is the orange button in this case.

.product {
  ...
  &__features {
    ...
  }
  &__btn {
     ...
     &--orange {
       ... 
    }
  }
}

As you can see, the deepest nesting level is the modifiers of the block element.

Jamie Reardon
  • 87
  • 3
  • Hello, thank you for your feedback! If for example I had to add a div in product__content (which would contain a feature set for example), what would be the ideal naming? Is product__features fine? I have trouble understanding the naming convention when there is "a lot" of nesting. In the end, you should only use the prefix that corresponds to the highest parent of the section? – chris Sep 06 '20 at 11:35
  • Hi, no problem. `product__features` would be fine. Like I said, you want to void creating selectors that create more than one block element e.g. block__element__element. This defeats the purpose of the naming convention. Therefore, creating unnecessary complex nesting selectors which will become messy and unmaintainable. You want to stick to *one* block element selector. Your SCSS would look clean like my updated original post. – Jamie Reardon Sep 06 '20 at 13:12
  • Thank you, your explanations are clear and simple! I'll ask you another question if you don't mind. I created another topic on the subject! https://stackoverflow.com/questions/63764373/html-scss-flex-class-directly-in-html-like-bootstrap-or-mixin-in-scss-element – chris Sep 06 '20 at 13:43