CODEWITHSUNDEEP
htmlcssbem
Yosri Mhamdi
Yosri Mhamdi

Reputation: 19

BEM naming convention: am I on the right path?

I have the following piece of html code...

<div class="testimonials testimonials--scale testimonials--increase-shadow">
  <div class="testimonials__image-wrapper">
    <img class="testimonials__image" src="./assets/images/passion/money-box.jpg" alt="money box: for the poor">
  </div>
  <div class="testimonials__edge-touch">
    <h2 class="headline headline--black headline--small headline--margin-bottom-large ">Fourth Created Forth Fill Moving Created Subdue Be</h2>
    <div class="flex flex--align-items-center">
      <img class="flex__margin-right-tiny" src="./assets/images/icon/passion_1.svg" alt="circle target">
      <p class="paragraph paragraph--grey">GOAL: $2500 </p>
      <img class="flex__margin-right-tiny flex__margin-left-auto icon-positioning" src="./assets/images/icon/passion_2.svg" alt="signal sign">
      <p class="paragraph paragraph--grey">RAISED: $1533 </p>
    </div>
    <p><a href="#" class="button button--white button--small button--full-width button--not-rounded">Read More</a></p>
  </div>
</div>

There is 5 blocks 'testimonials, flex(display: flex), headline(for the headers), paragraph and button block'. * is it a good code? * what can I do for it to make it better?

Upvotes: 0

Views: 327

Answers (1)

Pouya Ataei
Pouya Ataei

Reputation: 2169

It's okay for majority of cases, except of some parts like testimonials--increase-shadow and testimonials--scale.

Let's review the BEM quickly;

Block:

Referring to official documentation, Block Encapsulates a standalone entity that is meaningful on its own, in your case testimonials.

Element:

And elements are Parts of a block and have no standalone meaning, in your case testimonials__image-wrapper.

Modifier:

Flags on blocks or elements to change appearance, behavior or state, in your case headline--black.

Based on that, if you'd like to scale and add shadow to your element, you can have it defined as one variation (modifier). But what you're doing is more of an atomic approach of creating helper classes and adding it as a variation.

Reasoning:

Even though testimonials--scale can count as a modifier, but I presume, you're just adding scale to your testimonial, and that's a helper class. If you do name it like that, you'll limit yourself to only use that for the testimonial block which decreases reusability.

If you need a helper class, just name it globally like scale-up. As helper classes really do not count as modifiers. A good example of a modifier could be a heading and a heading--second where heading-second might have smaller font and different line-height and maybe different color. But simply making it heading--small-font or heading--green would only make your life harder.

Try to abstract a modifier into a more reusable class.

Fore more comprehensive read, check this out

Upvotes: 1

Related Questions