Don't Go Crazy Because Of CSS Styles Conflicts

By Luciano Sarno,

A development student that has become really stuck with CSS conflicts on a website.

Nightmare. No names describe better what I suffered when pair-programming with a colleague whose English accent I could barely understand.

Ok, not his guilt. He was learning the same way as me.

My partner loved to use many advanced selectors, like those:

more-2 h3:first-of-type 
.footer header a 
.links-container ul li
.more-1-element>span:first-of-type

The result? From the middle of the project on, every single error that we fixed, generated (at minimum) 5 more errors in other places of our page.

That was how I’ve reached the experience-based conclusion about never coding without using a simple and well-documented methodology for code-organization.

Googling if there was some known solution for that problem (I was a beginner) I found many methods. One of them, recommended by Google, was the BEM Methodology (Block-Element-Modifier) 

Complete docs here (https://en.bem.info/) but I’ll do my best for making this easier for you that it was for me ;)

Just follow the next simple tips, trust in me, you’ll never more get stuck with CSS conflicts and, of course, save tons of your precious LIFE hours.

One Class for Inside  / Another Class for Outside

Simple that. And the most important rule!

    <article class="article">
        <section class="photo article__photo">

• ‘photo’ class states how the element ‘photo’ behave internally (padding, colors, fonts).

• ‘article__photo’ class states how the element ‘photo’ behave in relation to the parent ‘article’ element (floating, margin, position, and so forth).

• And so forth!

Why?

Simple: now you can reuse the class ‘photo’ in several different places, just changing the positioning properties through the second class. 

Only class-selectors

Trust me: All other kinds of CSS selectors were created by an intergalactic conspiracy against the earthling’s developers.

Why?

Simple:

• 10% more work creating a class for each created element.

• 90% less work avoiding CSS conflicts between infinite different priority CSS orders.

Do your math ;)

Naming properly also helps

Very simple rules and you’re done:

• ‘parentClass__elementClass’ use double underscore for separating the elementClass from the parentClass.

• ‘parentClass__elementClass_modifier’ use single underscore for small changes on some class (ex: change some color).

Congratulations!

You already have the basics for starting with BEM and without CSS headaches!

Wanna know more? 

Go to https://en.bem.info/ and have fun!