Psych X86
Education
Psych X86
Ruth Irlekar

How to use BEM

Problem statement:

When we work on projects, we usually spend a lot of time maintaining and refactoring the code. That is why it becomes important to focus on things like project architecture, scalability,  naming conventions, etc. Imagine the readability of the code if we do not maintain any standard for naming conventions for the classes of our Html elements and writing CSS for them. Often times we experience problems due to cascading.  BEM comes to help in such situations.

Definition of BEM:

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development Block__Element–Modifier.

Advantages of using BEM:

  • Scalable: It easily supports the code structure as the projects grow.
  • Reusable: Making independent blocks and reusing them according to its requirement in different ways will reduce the writing of CSS code. 
  • Collaboration is easy: Working on a team project or another developer project is challenging if naming conventions are not followed. Many times the developer gets comfortable writing naming conventions for CSS selector which is different for every developer if no standard is followed. This will lead to confusing and unreadable code. BEM comes for help in such situations.  It provides a clear architecture and recognizable terminology for use across projects and among developers.
  • Modular: Block styles are independent, You will not face the problem of cascading. We can use the similar code into other projects if it is required.

How to use BEM

Let us see a few examples. Consider you need to create buttons with three different variants.

 Example 1.

// this creates a normal rectangular button with reddish background-color
<button class="btn btn--primary">
    <span class="btn__text">Know More</span>
 </button>

Example 2.

// this creates a normal rectangular button with dark blue background-color
<button class="btn btn--secondary”>
    <span class="btn__text">Know More</span>
 </button>

Example 3.

// this creates a circular play button
 <button class="btn btn--play"><span class="btn__play"></span></button>

Let us also see what are the common mistakes done when using BEM. Mostly it happens when we have a great-grandchild or great-great-grandchild element inside the component. We tend to make this mistake for example

<div class="card">
     <div class="card__header">
       <h2 class="card__header__title">Title</h2>
     </div>
 
     <div class="card__body">
       <img class="card__body__img" src="some-img" alt="description" />
       <p class="card__body__text">
         Lorem ipsum dolor sit amet.
       </p>
       <p class="card__body__text">
         <a href="/somelink.html" class="card__body__text__link"
           >Know More</a
         >
       </p>
     </div>
   </div>

Here we see that the format that is used is getting unreadable. As the elements in the components are getting nested the classes on the elements are almost not readable. We can see in this example that the pattern followed is something like this [block]__[element]__[element–[modifier] instead of   [block]__[element–[modifier].

Let us correct the above code and see how it should be

<div class="card">
     <div class="card__header">
       <h2 class="card__title">Title</h2>
     </div>
 
     <div class="card__body">
       <img class="card__img" src="some-img" alt="description" />
       <p class="card__text">
         Lorem ipsum dolor sit amet.
       </p>
       <p class="card__text">
         <a href="/somelink" class="card__link"
           >Know More</a
         >
       </p>
     </div>
   </div>

BEM naming isn’t strictly tied to the DOM, so it doesn’t matter how many levels deep a descendent element is nested. The naming convention is there to help you identify relationships with the top-level component block

Read More

Read our blog for all tech updates

subscribe

SUBSCRIBE TO OUR NEWSLETTER