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.