End CSS Conflicts With Block Element Modifier

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 override 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 blockelement 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 blockelement–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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram

Why do People Say: "Developers are Lazy"?
The saying “work smart, not hard” is applicable for programmers.
.
https://hackernoon.com/why-do-people-say-developers-are-lazy

.
Author: Aga Wozniak
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

Mitigating the DDOS Threats Facing Banks and Fintechs
As much as digitization and cyber simplified banking, the Fintech sector has left digital payment activity exposed to malicious and suspicious activity.
.
https://hackernoon.com/mitigating-the-ddos-threats-facing-banks-and-fintechs

.
Author: Josh Horowitz
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

24 Best JavaScript Blogs and Websites
In this overview, we have compiled a list of popular sites, as well as JS blogs that are worth reading and keeping in your bookmarks.
.
https://hackernoon.com/24-best-javascript-blogs-and-websites

.
Author: natashatsybliyenko
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

The Projects Working to Lower Ethereum Gas Fees
As more investors try their hand at DeFi, gas fees are shooting over the roof, making engaging with decentralized apps uneconomical for most users.
.
https://hackernoon.com/ethereum-gas-fees-are-there-any-projects-working-to-optimize-eth-gas-fees

.
Author: CryptoVirally SLR
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

On the Edge of a New Year: IT Predictions for 2022
The single biggest cause of network errors are people.
.
https://hackernoon.com/an-interview-with-uplogix-ceo-lisa-frankovitch

.
Author: Mignonette Garnier
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

How to Modernize IBM i Applications
If you’re like most IBM i users, you know how much value your IBM i data and applications bring to your business. Your end-users, however, may not. In today’s world of rich user experience, fast-paced application development, and constantly evolving customer expectations, IBM i applications are unde…
.
https://hackernoon.com/how-to-modernize-ibm-i-applications

.
Author: Lansa
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...