Atomic CSS, and the rise of Tailwind CSS

Although subjective, CSS is not the hardest thing to write. If you understand the core concepts, the box model and the cascading nature of CSS – and if you make the effort to learn the language, you’ll be creating your UIs before you know it.

However anyone who has been writing CSS for a while, knows there are complexities that come with it.

A client comes to you – they want to make a change to the UI. You weren’t the designer. You inherit the project. There are a bunch of CSS classes which you have no idea what they’re suppose to do.

You dig into the stylesheet, hoping everything will make sense. Most of the times this means going through 1000s of lines of CSS. Looking for media queries and how everything else comes together.

To say the least – for me, it’s not the most exciting part of the job. Nor is it something that I look forward to.

Sometimes you’re expected to deliver the next minute. The easiest thing to do is to create a new CSS class and forget about everything that was previously written. And you might be saying that’s not the way to go. I know. Everyone knows. But I’ve came across countless projects where designers took this approach. And I cannot blame them.

Our schedule is always full. We always have things waiting for our attention. And when the clock is ticking, and you’re expected to deliver fast, everyone will take the easiest route.

You might be thinking OK, but there’s no harm in adding 10 lines of CSS , right?

Hmmm, there is.

For websites which are constantly evolving, this means they’ll end up with 1000s of extra lines. Their CSS after a couple of years will end up a mess. I guarantee.

Stylesheets can become massive (Facebook downloads over 2.49MB of CSS). Every designer ends up uncomfortable removing CSS. Because they’re unsure which parts of the site are effected by them. If I remove this, would it break the site? There are tools, which remove unused CSS, like PurgeCSS.

What they can’t remove is duplicate CSS. Let’s say you have 2 classes doing basically the same thing. They’re both being used in the HTML. PurgeCSS won’t remove them.

Utility classes – a new paradigm

So what are utility classes? A utility class is simply a class that does one thing. For example a class mb-5, could mean add a bottom margin of 5px.

You’ll have many classes but they all do one thing. Classes for different colors, margins, paddings, shadows, sizes, display….

And on the HTML element you add multiple classes to get the result you wish.

<section class="w-full shadow p-20 mb-5 text-center text-color-primary">
  <h1 class="text-xl font-bold">This is a heading</h1>
</section>

By simply looking at the HTML you’ll instantly get an idea of what each class purpose is.

Now imagine, again that a client comes to you. And they want to change a part of the UI.

You won’t need to actually write any new CSS. But simply change the classes applied to the HTML.

You’re confident that you won’t break anything. If the section you’re working on, looks as intended. You know that nowhere else on the site has been effected by your changes. It can’t.

Tools like PurgeCSS can go through your code and clean up all unused CSS. You won’t have the issues of code duplication. Where two CSS classes are basically doing the same thing.

If you’re wondering whether this approach scales, I think it does. More companies seem to be adopting a mix of this approach. Companies like Facebook and Twitter.

What’s important is that you have good documentation, so that anyone jumping on the project, whether it’s after a week or after a couple of years, knows exactly what classes are used for what.

One issue with this way of writing CSS, is the initial time investment it takes to create all the needed classes. Thankfully there’s Tailwind, created by Adam Wathan.

TailwindCSS

TailwindCSS is a “utility first” CSS framework. It takes a totally different approach from other CSS frameworks – like Bootstrap or Zurb Foundation.

Bootstrap dictates how everything should look. And it’s hated by designers, for good reason. We cannot have all website looking the same.

It’s not good for business. And not good for the web.

Tailwind on the other hand, doesn’t have any ready made components. You’re expected to design the site, every section and every component, heading, button… You can have 2 websites built with Tailwind, without them having anything in common.

It helps you, in writing more maintainable CSS.

If a site I’ve done months ago, needs some modification, I can do it confidently in minutes. And if the same site is taken to another designer, he too can modify it confidently. Tailwind’s documentation is great!

Like Tailwind, there are other CSS frameworks, which took this approach. Some are Basscss, Beard and turretcss.

I’ve enjoyed tailwind from the first time I’ve tried it out. So haven’t tried any of these.

Conclusion

I’m of the opinion that writing CSS is not hard. Writing good CSS is. You might not like the fact that instead of one class in your HTML, you’ll end up with 10. I had the same issues. I was worried that the HTML would end up being less readable. It’s been 7 months since the first time I used Tailwind and haven’t looked back. Give it a try. Try re-creating a page you’ve already done. And take it from there. If it’s not for you, you’ll know.

And have fun!