BEM CSS Element or variant

Question

BEM CSS Element or variant

I am currently in the process of transitioning to BEM CSS and have created a component that I would like to have both small and large versions at the block level.

I am struggling with determining which part should be considered the block and which should be the modifier. If I create two blocks, it goes against the idea of having a single component. As a result, my elements are now modifiers when they should simply be elements for either the small or large version.

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

css bem

Answer 1

Answer №1

c-sales serves as the main block in this context. The elements within it are:

c-sales__headlead

c-sales__heading

c-sales__subheading

c-sales__details.

When it comes to applying modifiers, you have two options. The first approach follows BEM guidelines by creating modifiers for elements that differ from the base version. This would result in:

c-sales

c-sales__headlead c-sales__headlead--small

c-sales__heading c-sales__heading--small

c-sales__subheading

c-sales__details

The second option is less recommended by BEM but involves using nested selectors to achieve a similar outcome. You can explore this method further at:

c-sales c-sales-theme-small

c-sales__headlead

c-sales__heading

c-sales__subheading

c-sales__details

Answer 2

c-sales serves as the main block in this context. The elements within it are:

c-sales__headlead

c-sales__heading

c-sales__subheading

c-sales__details.

When it comes to applying modifiers, you have two options. The first approach follows BEM guidelines by creating modifiers for elements that differ from the base version. This would result in:

c-sales

c-sales__headlead c-sales__headlead--small

c-sales__heading c-sales__heading--small

c-sales__subheading

c-sales__details

The second option is less recommended by BEM but involves using nested selectors to achieve a similar outcome. You can explore this method further at:

c-sales c-sales-theme-small

c-sales__headlead

c-sales__heading

c-sales__subheading

c-sales__details

Answer 3

Answer №2

When designing an element, it is best to begin with a base design and then apply small or large alterations as needed:

<!-- Base Design -->

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

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

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

Answer 4

When designing an element, it is best to begin with a base design and then apply small or large alterations as needed:

<!-- Base Design -->

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

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

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

BEM CSS Element or variant

Answer №1

Answer №2

Similar questions

What is the best way to create a button with a dynamic background animation in React?

Is it possible to apply a delay function to JQuery's AjaxStart/Stop events?

Utilizing jQuery's multiple pseudo selectors with the descendant combinator to target specific elements

Is there a way to configure my dropdown menu so that only one dropdown can be open at a time and it remains open when clicking on a <li> item?

Style your div with CSS to include a border around the content

Changing the position of an element in CSS using the center as the reference point, based on a JavaScript variable: How can it be done?

Hover transitions in CSS are not functional on the active links

What is the method to create a resizable table column border rather than resizing the bottom corner border?

Creating a multi-column mobile menu using Bootstrap5

Displaying a div and ensuring it remains visible upon clicking

What causes Bootstrap 5 cards to malfunction when containing scrollable content?

What's the best way to constrain a draggable element within the boundaries of its parent using right and bottom values?

Modify a section of an HTML text's formatting

Aligning content vertically in Bootstrap 4 so it is centered

Event triggered before opening the cell editor in ag-Grid

Creating a design with CSS that features three main content columns of equal height, all of which are scrollable and have fluid heights, along with a sticky

You cannot use css() in conjunction with appendTo()

JavaScript did not apply the style as expected. However, the console displays the information

Move content to the bottom of a div element while the user is scrolling

What is the best way to implement a secondary sticky navbar that appears on scroll of a specific section, positioned below the primary fixed-top navbar, using jQuery and Bootstrap 5?