Lower CSS specificity as much as possible with Bem and Inuitcss

I have to open this post with this disclaimer; in order to fully understand what's going on, you'll need couple of things sorted out.

Work with some CSS pre-processor (SCSS, LESS)

Familiarity with Bem Methodology

Familiarity with Inuitcss

Now, considering that we have established ground rules, let's begin.

Introduction

I have worked on several big projects in the past. By big I mean projects that ware in active development 6 months and more. My first part of engagement was organization of CSS. Second part was building JS (ReactJS and Angular 2) components and RestAPI integration, but that's not important so let's focus purely on CSS.

Property overrides

Every CSS tutorial I watched in the past, didn't cover very !important thing in the CSS world. Property overriding.

Why we try to avoid that, you might ask? Because my friend, what callback hell represents in JS, property overriding is just equally bad in CSS. Don't get me wrong, we still need to override something sometimes, but I believe there's a better and cleaner way to do so.

Epic dark story

So many unused properties lying somewhere deep inside your compiled CSS file. When project grows, you add more variants and more overrides and eventually because of CSS specificity you start using !important. Then you realize that you have overrode something that was not supposed to be overridden. Now you feel helpless and you are a one line of code from quitting but not the project. The job. Oh, and I won't even start talking about performance issues. :)

Show me the way!

So, first of all let's see how specificity work.

<p class="paragraph">
    <span class="red">Lorem ipsum</span> 
</p>

Let's say we have this html above on our page. Now, let your inner child play with the colors for a little bit. :)

.paragraph .red {
    color: maroon;
}

.red {
   color: red;
}

We already know that CSS is executing line by line from top to the bottom. Can you guess what color will be the element with class red? Of course not! Will be maroon. I'm sorry if I assumed you said red, it's fun for me to try to predict how your mind works.

Specificity took over and overrode red color. Can we somehow organize this differently so there is no overrides with no increased specificity? Of course!

I present to you my ultimate combo!

Bem Methodology

Actually current example is just about Bem Methodology but combo will make more sense later when we will be covering the big boys (projects).

Let's rewrite example above with Bem.

<p class="paragraph">
    <span class="paragraph__item paragraph__item—red"></span>
</p>

How can we color it?

.paragraph {
    &__item {
        &—red {
             color: red;
        }
    }
}

Keep in mind that this example only works with some CSS pre-processor like SCSS or LESS.

Watch closely how this example above will be compiled.

.paragraph__item—red {
    color: red;
}

What? :O Just one line and no stacking elements? No way.

& sign represents concatenation of strings, exactly like in JS where "2" + "2" equals "22". We exactly wanted that. Our first refactor done with lowest possible specificity.

Inuitcss

Now comes into the play second part of the ultimate combo and it is Inuitcss!

While Bem covers organization of html tags and their names (classes), Inuitcss gives you nicely organized, maintainable and scalable structure of CSS files.

I love Inuitcss because it covers everything from pages, layout, variables and some global settings to specific elements, mixins, helpers, components. Maybe I forgot something but you got the point.

Conclusion

With combination of those two paradigms and detailed planning of the project, specificity can be contained up to 2 or 3 levels maximum, while property overriding should be minimal and nicely executed. Project becomes maintainable and scalable, you don't want to kill yourself, your appetite comes back, and finally you are hungry for more.

Take care good people, and thank you for reading!