Introduction to Utility-first CSS for Web Developer

By . in Coding. Updated on .

CSS is an easy language to learn (and to implement) for creating a beautiful website. However, when it comes to implementing CSS at scale, it’s not that simple. For large scale websites and applications, CSS becomes really hard to write in.

CSS specificity is crippling up, and so, using !important is often inevitable and eventually adds up to the CSS file size.

Well, the good news is that web developers have come up with several methodologies to help write and organize CSS better, such as BEM, OOCSS, SMACSS, and ITCSS. We’ve covered some of these methodologies in our previous posts, Understanding CSS Writing Methodologies and Intro to ITCSS for Web Developers.

In this post, we are going to look at another methodology called Utility-first CSS, which, at the moment of this writing, is rapidly gaining traction from the web developer community.

Let’s see how it works.

Utility-first CSS: How it works

Traditionally, we will write a CSS class which may contain the styles for the colors, size, borders, margins, and shadows like below:

.foo {
    margin: 0 auto;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 10px 30px -2px rgba(0, 0, 0, 0.1);
    background-color: blue;
}

With Utility-first CSS, each class is a low-level CSS composition. Instead of creating a class that applies a bunch of different CSS rules, it will only contain very specific rules. If I’d like to add a rounded corner, let’s call it .rounded-sm:

.bg-white {
    background-color: white;
}
.rounded-sm {
    border-radius: 4px;
}
.shadow-md {
    box-shadow: 0 10px 30px -2px rgba(0, 0, 0, 0.1);
}

If you’d like to apply a background color of white, a small border radius, and a shadow, you will need to add these three classes.

<div class="bg-white round-sm shadown-md"></div>

At first, this may look like a mess. As you need to add more styles, you will need to add more classes to the div element. But once you’ve built something this way, you’ll notice some of the benefits as it allows you:

  • To create a custom style without actually writing a custom CSS as well as without having to create custom class names. As naming a class is hard, especially on a large scale website or application and we often end up giving our classes ambiguous names like .box, .card, .container, etc.
  • To make a change without worrying about breaking something of the other pages or components, which makes website CSS more maintainable.

Utility-first CSS is not an entirely new paradigm. It has another name called Atomic CSS. However, the web community did not quite buy the idea, so it did not get enough traction to make it a popular paradigm to write CSS.

A new framework called Tailwind CSS emerged that brought this idea of Utility-first CSS, and it does suddenly make sense. So what makes Tailwind CSS different?

Tailwind CSS

Tailwind CSS is created by Adam Wathan. It’s shipped as an NPM module. We can easily install it by typing this command below:

npm install tailwindcss

On top of the Utility classes, Tailwind comes with handy features such as its directive @tailwind and @apply.

The following codes will import the Tailwind built-in styles – the base styles which address browser default style consistency similar to Normalize.css, the components, and the utilities.

@tailwind base;
@tailwind components;
@tailwind utilities;

The @apply directive allows you to compose different styles. This directive will be useful when you have components with repeating utility classes.

A common example of this is for a button. It’s practically more convenient to add a class .btn like below rather than adding a bunch of different classes.

<button class="btn">Button</button>

In this case, the @apply comes in handy to put together these styles on a single .btn class.

.btn {
    @apply bg-blue-400 text-white font-bold py-2 px-4 rounded;
}

Optimising File size

Another good thing about TailwindCSS is that it works very well with PurgeCSS to remove unused styles on your website. And since you’ll rarely create your custom CSS and classes, the result of your stylesheet can be significantly small.

Firefox Send is able to ship their stylesheet at just 4.7kb (gzipped)!.

Code editor integration

If you’re using Visual Studio Code, you can boost productivity further with the extension: TailwindCSS Intellisense. This extension enables autocompletion for TailwindCSS classes as you type.

It supports various file types, including HTML, Vue, and PHP.

List of class name suggestion in Visual Studio Code

So these are some of the key advantages of using TailwindCSS compared to other CSS frameworks. Rather than loading a bunch of stylesheets, Tailwind CSS comes as an NPM module.

It provides configurations that’ll allow us to produce CSS that meets our needs and could result in a smaller stylesheet.

Wrapping Up

Changing the way we write CSS is not always easy. It means that we have to unlearn what we are already used to. At first, Utility-first CSS might look weird to you, but as mentioned, once you’re used to this way when writing CSS, you will find your productivity to be increased manifolds.

Have you tried using Utility-first CSS on your project? Do let us know about your experience in the comments section below.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail