Why vanilla CSS is better than any other utility framework

Mark Baidebura
Nov 4 · 3 min read

Have you ever used a CSS utility framework? If you have, then I think you found it pretty useful and full of potential. And it would be true but you are likely to change your opinion when you’ll use it in large-scale projects or try CSS grid or flexbox instead.

Here is some proof.

First of all:

What is a utility framework?

Utility framework provides low-level utility classes that let you build completely custom designs without ever leaving your HTML. Think of this as a bootstrap without a grid system.

I think every web developer knows that the website needs to have repeated elements. If for example, we have a list of links styled with bootstrap, like this

<ul class=”list-inline”><li class=”mr-2 px-1 font-weight-bold text-danger bg-light”>Link</li><li class=”mr-2 px-1 font-weight-bold text-danger bg-light”>Link</li><li class=”mr-2 px-1 font-weight-bold text-danger bg-light”>Link</li><li class=”mr-2 px-1 font-weight-bold text-danger bg-light”>Link</li><li class=”mr-2 px-1 font-weight-bold text-danger bg-light”>Link</li></ul>

It doesn’t look that bad, isn’t it? But what happens when you need to change for example margin of list-item, we’ll have to manually edit the margin of every list-item. While if we styled it using CSS class we would have to edit just one line of code instead of 5 lines. So as you see here we have really big problems when trying to scale the project if we use a utility framework.

So why do utility frameworks even exist? Because they are great for prototyping, that is when you want to try different styles on the go, and you don’t want to write all the CSS manually. First, it saves your time without limiting your styling options too much. Second, you can learn a lot from the framework’s classes you used throughout the prototyping phase and define correct patterns for your styles. Furthermore, when the time comes to create your own “btn” and “btn-primary” you’ll know better what goes where for the particular project.

Also, because of the large number of CSS classes, your styles file becomes too large to load fast. So you should use something that removes unused CSS styles, something like PurgeCSS.

Conclusion: CSS with the aid of LESS/SASS + BEM ends up being more scalable in the long-run, if you know what you’re doing, of course. With utility frameworks, there’s a lot of hackish overrides to achieve certain solutions not provided by the framework. In the case of the utility approach, it ends up being too verbose and requires too much “looking at the docs” before becoming productive.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade