End CSS Conflicts With Block-Element-Modifier (BEM)

Are you struggling with CSS styling?

Adding selectors and properties don’t seem to be working? Do you dislike styling and not seeing changes? Have you discovered styles that you didn’t include are being displayed? or that div won’t align properly? I have great news for you.

CSS is very useful in styling HTML elements. Have you ever failed to link your CSS file to your HTML code and see how horrible your webpage looks? However, when writing styles, CSS conflict often arises as a result of inheritance from parents or ancestors. These conflicts are quite frustrating.

In order to organize your CSS and make it DRY, you might have written global styles using element selectors or reusable classes, then overridden them with other classes exploiting specificity through nesting. This is not a bad approach in general, but I can make your life easier and help you follow industry trends.

Block Element Modifier(BEM)

I present to you BEM, the latest industry best practice for writing CSS, and makes coding easier. BEM is a guideline, not a piece of technology or a new framework, so you don’t have to update your CV. You don't download or install anything, you just learn it and apply it to your code.

It is a set of rules on how to name and use more CSS classes. BEM stands for - Block Element Modifier - and suggests that your CSS classes follow that order as shown below

 <section class="block">
      <div class="block__element"></div>
      <div class="block__element--modifier"></div>
 </section>

The class block refers to the parent container of various related elements, while the class block__element refers to its contents. These contents may be of different CSS stylings hence, to differentiate them you may attach a modifier to its class as in block__element--modifier.

Note that ”__” separates block and elements while “--“ attaches modifiers to elements. Unlike modifiers classes with more than one word as a name are separated with “-“. This is the convention and helps anyone reading the code to identify these differences easily.

For example: Creating a blog section may look like this with BEM

  <section class="blog-section">
      <div class="blog">
        <h1 class="blog__heading">A Better Life</h1>
        <div class="blog__main">
          <h3 class="blog__sub-heading"> Main Tips For Life</h3>
          <article class="blog__article">You should always do...</article>
        </div>
        <div class="blog__main--more-tips">
          <h3 class="blog__sub-heading--more-tips">5 More Tips</h3>
          <article class="blog__article--more-tips">You can also do...</article>
        </div>
      </div>
    </section>

Additionally, BEM encourages applying the single responsibility principle to CSS, by creating classes that do one thing well and let elements use multiple classes.

Why would I want to make writing CSS a lot easier with BEM?

• Prevents CSS Conflicts

This is caused mostly by the interference of inheritance on CSS styling. HTML elements should follow deliberate styling, rather than inheriting styles automatically. This prevents forcing styles on elements while allowing for easy and predictable styling.

• Allows for Reusing Classes For DRY Code

Classes in CSS were meant to be shared by multiple elements where applicable, hence BEM makes styling similar structures faster and effortless

• Better Readable Code

If you follow the BEM rules it is proven and certain your code will be readable anywhere in the world even on Mars. Tested and trusted.

• That’s how the best in the industry code

Well, current trends by tech giants have endorsed and embraced BEM. So using it shows you are trendy and updated right!

Conclusion

Congratulations!!!

Hope you enjoyed learning the new way of writing CSS? BEM is the latest industry standard for writing DRY HTML/CSS code.

If you require more clarity and reference on BEM visit http://getbem.com/?msclkid=b873793ed03f11ecb9a960bceb3e5280.