CODEWITHSUNDEEP
cssbem
ottz0
ottz0

Reputation: 2605

BEM CSS Block or modifier

I'm trying to adopt BEM CSS and have a component but I want small and large versions of it at the block level.

I'm unsure of what should be the block or what should be the modifier. Because then I would need two blocks which defeats the purpose of making a component. Now my elements are now modifiers whereas they should just be elements from either small or large.

<div class="c-sales c-sales__small p3">
   <p class="c-sales__small--headlead">Limited time only</p>
   <h1 class="c-sales__small--heading">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
   <h2 class="c-sales__small--subheading pt2">Only in September</h2>
   <p class="c-sales__small--details">this is some text</p>
 </div>

Upvotes: 0

Views: 101

Answers (2)

Hugo Silva
Hugo Silva

Reputation: 6958

c-sales is clearly the block. Your elements are:

c-sales__headlead

c-sales__heading

c-sales__subheading

c-sales__details.

Now, for the modifier you have two options. The first, most inline with BEM, would be to create modifiers to all elements that are actually different from the base version, so you could end up with:

c-sales

c-sales__headlead c-sales__headlead--small

c-sales__heading c-sales__heading--small

c-sales__subheading

c-sales__details

The other option is less verbose, but BEM recommends against it: you can use nested selectors. That would technically be a theme instead of a modifier, but it achieves what you want (modify stuff at block level). Have a look at this: https://en.bem.info/methodology/css/#nested-selectors

c-sales c-sales-theme-small

c-sales__headlead

c-sales__heading

c-sales__subheading

c-sales__details

Upvotes: 0

Robin Baby
Robin Baby

Reputation: 357

The best approach is to make a base version of the element first, and then add small or large modifiers to it:

<!-- Base version -->

<div class="c-sales p3">
   <p class="c-sales__headlead">Limited time only</p>
   <h1 class="c-sales__heading">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
   <h2 class="c-sales__subheading pt2">Only in September</h2>
   <p class="c-sales__details">this is some text</p>
 </div>
 
 
<!-- Small version -->

 <div class="c-sales c-sales--small p3">
   <p class="c-sales__headlead c-sales__headlead--small">Limited time only</p>
   <h1 class="c-sales__heading c-sales__heading--small">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
   <h2 class="c-sales__subheading c-sales__subheading--small pt2">Only in September</h2>
   <p class="c-sales__details c-sales__details--small">this is some text</p>
 </div>
 

<!-- Large version -->

 <div class="c-sales c-sales--large p3">
   <p class="c-sales__headlead c-sales__headlead--large">Limited time only</p>
   <h1 class="c-sales__heading c-sales__heading--large">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
   <h2 class="c-sales__subheading c-sales__subheading--large pt2">Only in September</h2>
   <p class="c-sales__details c-sales__details--large">this is some text</p>
 </div>

Upvotes: 0

Related Questions