RU
mrttl
mrttl
26 March 2017

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
#tadatuta
26 March 2017

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
#mrttl
26 March 2017

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