search

bem-site / bem-forum-content-en

Content BEM forum for English speak users
3 stars 0 forks source link

Should I give all elements a class name? #51

Open mrttl opened 7 years ago

mrttl commented 7 years ago

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

tadatuta commented 7 years ago

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>
mrttl commented 7 years ago

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

tklives commented 5 years ago

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!

tadatuta commented 5 years ago

@tklives nope, add classes just when you need them