CSS Utility classes: from blasphemy to hype

2023-11-27 | 5.3 min reading

Utility classes had a long journey.
Once considered a jest, this methodology is nowadays turning into a de facto.

This is a huge achievement for utilities, which for a long time had to fight sarcasm and shame from the community.

I still remember when I started using utility classes at the end of 2019.

I had managers telling me not to do it.
I had FE friends telling me they were hating utility classes.
Funny enough, BE people were the only ones who got them immediately.

The truth is, utilities were too good to be ignored; the results were speaking for themself.

I remember the feeling after using Tachyon for the first time. It was a small personal project but it was done and dusted in a week without touching a single line of CSS.

Kind of strange at the beginning, but the consistency and the speed were undeniable.

That was it for me. That was my turning point.

At work, I started experimenting gradually.

Of course, I stayed conservative just in case something was going to explode.
So, I opted for Bootstrap which turned out to be the perfect bridge to utilities.

In fact, Bootstrap v4 shipped with utilities and had all the old goodies out of the box (BEM, components, grid).

Soon enough we started to see the results. Projects delivered on time. Very few errors or reiterations. Developers onboard with the first PR in less than a day. Very happy client prising the projects and extending the contract.

I can’t deny that it took a little leap of faith with all these people saying “No, don’t use utility classes” but it paid off well.

In retrospect, I don’t think it would have been possible to achieve that quality and speed in any other way.

If I think about my feelings as an early adopter I had in that period, it makes me smile. It was such naive of me.

While it’s true that only in 2020 utilities (and Tailwind) got totally established, it is also true that in 2019 utilities were at least 14 years old!

Consider that the earliest traces of utilites I could find in the industry were around 2005 (See Yahoo! and tv.com).

It took roughly 5 years for the first open-source projects to appear in early 2010.

In particular, we’ve had projects like ez-css (2010) by Thierry Koblentz (more on this later), Foundation v2 (2011), and Bootstrap v2 with the now prophetic commit add utilities.less file for generic classes.

Despite Foundation and Bootstrap being the big names, the interesting case was ez-css.

This is because ez-css was a complete CSS Utility Framework.
No doubt that the project was the result of the experience Thierry collected while working at Yahoo! dealing with CSS at scale.

In fact, Yahoo! at the time was suffering enormous CSS scaling issues, with the Separation of Concern (SoC) methodology crumbling under the pressure of international teams.

By the way, Thierry is also one of the guy™ who participated in starting the whole utility movement.

One of his major contributions is the now iconic article Challenging CSS Best Practices (2013).

The article is a historical milestone. This is because it’s one of the first articles daring to criticise Separation of Concern (SoC) as not suitable for projects at scale.

Read the comment section to see how shocking that was at the time.

But Thierry did not stop there. He even had a section of the article proposing a whole syntax blueprint for utility classes.

Because presentational class names have always been deemed “out of bounds,” we — the community — have not really investigated what their use entails. In fact, in the name of best practice, we’ve dismissed every opportunity to explore their potential benefits.
— Thierry Koblentz

Anyway, Thierry was not the only one trying to advocate for utility classes.
Another interesting case was Renato Iwashima with his talk Atomic Cascading Style Sheets.

The talk is quite something, as — in a way — is the perfect explanation for why you would use utilities. Probably, that’s the reason it was mentioned in one of the earliest commit of Atomizer.

Articles and discussions that will come later are a subset of what Renato explains in his talk.

All that said, this form of early advocating did somehow work. In the next couple of years, new open-source CSS Utility Frameworks appeared.

Among others, BASSCSS - 2013, Tachyons - 2014 and Atomizer - 2014.

Despite this proliferation of projects, utilities were still in stealth mode. The community, locked in an echo chamber, was still mocking and rejecting any challenge to SoC.

Things started to change in 2017 when Adam Watan published Tailwind.

I believe this to be a turning point for utilities.

In fact, Adam was already a well-established public speaker, YouTuber, blogger and educator in the PHP community with several courses and products in his track record.

So, when Adam decides to get in the CSS utilities space brings in all his marketing skills and connections; and from there on utilites explode in popularity.

As extra, Adam found TailwindLab in (2020) going all in with Tailwind.

Having a company backing Tailwind and having Adam advocating, soon utilities get widespread adoption by businesses as well, which now see in TailwindLab a clear pathway for support and training.

No doubt that utilities wouldn’t be where they are without the media attention Adam was able to generate and the partnerships and support he managed to get from other communities; among others, Taylor Otwell with Laravel, and Guillermo Rauch with NextJS.

Are utilities here to stay?
Apparently so. With all the material out there, only few dare to criticise the methodology now.

In addition, Tailwind — which is now the main exponent of the methodology — has been pretty hungry for innovation, with TailwindLab very reactive in absorbing ideas and pivoting when necessary.

Now the risk is the same echo chamber Separation of Concerns (SoC) had, with utilities frozen in the dogma.

Anyway, if we can get some takeaways from all of this what would that be?

First, I would say technology by itself is not enough. You need a fair amount of propaganda to get adoption and be established.

Second, evaluating technology is tricky. Some points may not be obvious at all at first sight; direct experience is key in the evaluation process.

Third, communities are fundamentals for spreading the word and sharing new ideas. Unfortunately, sarcasm and echo chambers are a real danger.

Fourth, having companies backing open-source software can facilitate adoption from businesses, as in the case of TailwindLab.

And last but not least, any type of communication like writing, podcasting, YouTubing and so on may not immediately win people’s souls but it may start a conversation and tune the spirits for what will come next.

All that said, if you are interested in the subject, it’s worth exploring Challenging CSS Best Practices (2013), Atomic Cascading Style Sheets (2013) and CSS Utility Classes and “Separation of Concerns” (2017) to see how all started.

CSS Utility classes: from blasphemy to hype

Links

Comments