End CSS Conflicts With Block-Element-Modifier (BEM) by@KossySteve

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

Block Element Modifier is the latest industry best practice for writing CSS. It is a set of rules on how to name and use more CSS classes. BEM is a guideline, not a piece of technology or a new framework, so you don’t have to update your CV. 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.
image
Stephen Kossy HackerNoon profile picture

Stephen Kossy

Full stack web developer(React & Node.Js)

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)

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

image

  • 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!!!
image
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.
react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!