Should I give all elements a class name?

Which is better:

<article class="news">
  <div class="news__image">image</div>
   <div class="news__details">
     <h1>News title</h1>
     <p>News story</p>
   </div>
</article>

or:

<article class="news">
  <div class="news__image">image</div>
   <div class="news__details">
     <h1 class="news__details-title">News title</h1>
     <p class="news__details-story">News story</p>
   </div>
</article>

Please note: .news__details-title and .news__details-story have no real style as I already have a base style for all my H1s and P tags, so with BEM, can I just add phantom classes to make the markup look more readable? Or go with the first example? Personally I like option 2...

7 years ago

tadatuta

There's nothing wrong with extra classes but consider getting rid of generic styles for tags in favor of blocks like heading. So then you can mix such blocks on DOM nodes you need to style:

<article class="news">
  <div class="news__image">image</div>
   <div class="news__details">
     <h1 class="news__details-title heading">News title</h1>
     <p class="news__details-story paragraph">News story</p>
   </div>
</article>

7 years ago

mrttl

Oh I see, much better, thank you Tadatuta! Learning more by the minute!

6 years ago

tklives

On a similar note @Tadatuta - in your example above, would there be any benefit to having the class news__details-title even if there are no styles applied to that selector? Like, say the only styling you need is supplied by heading. Thanks!

5 years ago

tadatuta

@tklives nope, add classes just when you need them

In order to leave a comment you need to login.