How to start writing utility-first CSS
Imagine a large web project with readable and easily maintainable stylesheets. Imagine building your stylesheets fast but keeping them slim. We found that building our projects on top of frameworks was limiting us a lot. That’s why we decided to change from framework-based CSS to utility-first CSS. You see, here at Think Tomorrow, we really put our name to the test. Let me tell you how we implemented utility-first CSS.
Ready. Set. GO!
Where do we start? Pick a project of course! If you really want to test the possibilities of utility-first CSS, you should go for a larger, scalable project. After all, you really want to feel the difference.
We were currently in the process of creating a fresh looking design for one of our larger codebases. During the last two years, the project has grown a lot. Because of this, the CSS file structure of the project was not a pretty sight. We proposed a cleanup of the code structure for better loading times and faster development. But how do you start cleaning up the mess? Exactly, we threw our CSS files in a legacy folder and started our new styling from scratch.
TailwindCSS install and configuration
For this project we chose to work with TailwindCSS, a framework that was build on the same utility-first principle. If you want an example of some top-notch documentation, tailwindcss.com is your place to be. It just takes you a few minutes to get it up and running, ready for configuration.
Then we defined all colors, breakpoints, margins, etc. in our tailwind.config.js file. Using the documentation, this was done in no time.
To build our grid for the website we setup warpaint, an in-house CSS framework designed just for building simple responsive layouts. No predefined/predesigned components included. Of course, you can just build it using the TailwindCSS classes.
Utility-first CSS, without writing any.
So how do you start writing your CSS? You don't. Except for some frequently used components and general custom CSS, you can write all your styling in your HTML. The generated TailwindCSS classnames are self explanatory and the beautifully working search functionality in the documentation, makes learning to use them very easy. After a bit of practice, you're building pages faster than ever. And the best part? It's clean and understandable for anyone in the team.
As a programmer you learn to never repeat yourself. That's why we created a very simple folder structure, where each file is carefully named, for recurring styling. A folder with Sass files dedicated to a specific component like buttons, tags and forms. A folder for allround styling like typography, animations and utilities. One main.scss to rule them all and that's it!
No more endlessly nested CSS classes with semantic names like .mobileheader-icon-left or .testimonial-image-container either. Instead we use short non-semantic classnames. Then you can easily construct your classes by using the Sass @apply method to add all necessary utility classes. Building your stylesheets like this is easy and totally embodies the utility-first way of writing CSS.
Slim. Easy. Readable. Maintainable.
After a few weeks of development, we finished the fresh redesign for our partner. Though, for our development team the newly created code structure feels like an even bigger achievement.
We compared the foundation based codebase to the utility-first one. This is what we found:
- Slim CSS. Our custom CSS file count went from 59 to 28. What's even more impressive is the reduced file size. On mobile we went from 225kb of CSS to 87kb. On desktop we went from 216kb to a stunning 44kb! Pretty cool, right?
- Easy styling. No more eternal switching between HTML and CSS files. You can style the majority of your pages without switching at all by using TailwindCSS-classes in your HTML file.
- Readable code. Applying the utility-first way of thinking while naming classes and building them makes your stylesheets readable by anyone.
- Maintainable code. You want to see what your website looks like in a different color? Changing one line of code in your config file will do the trick. Your styling is totally synced up with each other, so making changes is easy and your style config is centralized. It helps you to work on bigger projects, as your classes are set up to be reusable everywhere.
So now you’re ready to start building your own project based on our utility-first CSS workflow and feel the improvement for yourself. Once you try it, you will never go back.
Die we met jou willen delen
Subscribe to our newsletter
We have a monthly newsletter. Want to stay in touch about all developments in TT? Subscribe here to our newsletter!