The multiple ways of using css classes

There are many ways how to handle and apply css styling to html elements. The most simple way is to inline the styling, but that's to hard to maintain, and so we are concentrating on using css classes (not IDs) and applying them to the html elements.

The main usage of css should be clear at this point. If you are not yet familiar with css, you could start by looking at the syntax documentation at MDN. What I want to look at, is the different ways of writing, comibining and applying css classes.

The generic, the semantic and the modular

Boiled down, there are three approaches to use css classes, that are generic, semantic or modular. Each approach has it's advantages and disadvantages. So let's get startet.

Semantic css

The semantic approach uses classes that describe wahte the elements are, not what they look like.

<p class="intro">
    This is an intro paragraph.
</p>

.intro {
    font-size: 150%;
    font-weight: bold;
    background-color: light-blue;
}

So all your styling is bundled in one class, wich is named by the use case. Here an "intro" paragraph. But what if we need a different version of the intro, like in a different section and different context? We could duplicate the styling into another class.

.intro-section-b {
    font-size: 150%; /* repetitive */
    font-weight: bold; /* repetitive */
    background-color: lemon;
}

You see, most of the styles have now been written twice. That's hardöy maintainable in the long term. So we could re-organise our styling into molulized classes.

Modular css

Now what if we combine the equal parts into a default .intro class, and the additional, altering styling into a seperate one?

<div class="intro">
    default
</div>
<div class="intro alternative">
    alternative
</div>

.intro {
    font-size: 150%;
    font-weight: bold;
    background-color: light-blue;
}

.alternative {
    background-color: lemon;
}

There could be a problem with the .alternative class thou, as it's working on all elements, that get that class. Maybe uninteded. We could be more concrete width

.intro.alternative {}

or we could do it like other approaches like OOCSS or BEM like so

/* BEM */
.intro {}
.intro--alternative {}

which would be used as this followed.

<div class="intro intro--alternative">
    alternative
</div>

As you see, we have already moved from one single class to multiple class, while still beeing semantic. Additionally our code gets DRY ("don't repeat yourself), which is definatly desireable.

The last approach goes even one step further, omitting the semantic, and splits each style into it's own class.

Generic css

With the generic approach we move our declaration from the css into the html part, by applying all the needed classes.

<div class="font-size-150 bold background-lightblue">
    still an intro
</div>

.font-size-150 {
    font-size: 150%;
}

.bold {
    font-weight: bold;
}

.background-lightblue {
    background-color: light-blue;
}

If we use this approach, with a predefined set of needed classes - classes for all font-sizes, background colors, font weigths etc. — we almost have no need to touch the css part again. We could work on our html and deside how our element looks by just choosing the necessary classes. This can come handy, when you build components that don't have their own scoped styling, but use all the classes provided by the generic css.

What is the best way?

If you read this far, you may hate this part: It depends! (There, I said it)

No, really. In a real world you have to choose the best way for you current project. If it's a small or personal page, that is not supposed to grow or change in the long term, your very good to go with semantic and modular classes.

If you build enterprise projects, where you create the css and others just output html, you can use generic css, as it's like a tool box for them, which thei can use, to build their own element or components. But beware, things can go out of control very quickly, if there is no styleguide in place, that restricts the use of all the generic classes.

I hope I could provide you with a quick overview on the different approaches. There are a lot of articles and blogs that dive a lot deeper into this topic. But whatever way you choose, don't forget: Embrace the cascade. (It' your friend)