Hitchhiker's guide to CSS Methodologies: Utility first

My mind boggled for a long time how to explain utility first methodology. From my opinions being quite controversial, like my opinions on the Spider-Man films (checkout Codewords for more on that), to just trying to build that perfect earring, nothing clicked.

The first idea was making a perfect earring and support my obsession for the random and wonderful accessories. But how do you make a perfect earring? I recognise patterns (shapes, styles, clip-on types), but how do you choose one? It's like asking me to pick between my Mjölnir earrings, Spider-Man earrings, Banana earrings and Jeff Goldblum. An impossible task that will not bring anyone joy.

Until it hit me, I'm thinking about these things all wrong. Yes utility first and patterns coincide, but in a slightly different ways.

So, let's talk practically. Grab your mask and put it on your face, let's go shopping, y'all!

Utility first of why are we shopping?

You can't think about Utility first without thinking of framework like Tailwind, Tachyons and Basscss. You strip general layouts into smallest parts, but unlike with atomic methodology, you don't see individual components, you see the matrix, binary and how these things are put together.

It's like looking at a cake and immediately seeing what it's made out of: usually some flour, eggs or linseeds for thickness and other sugary sweet goodness. (Spoiler alert, we're buying ingredients for a brownie, non vegan I'm afraid. However if you can send me a good vegan brownie recipe - I shall try it, and maybe morph the recipes).

Cake is a lie (or what is a utility)

It is. And it isn't. Depends, innit.

Full disclosure, DO NOT FOLLOW THIS FOR AN ACTUAL RECIPE, I cannot remember what I did to make the brownies, so I can only suggest the "right" things to buy. We'll keep this as mysterious as all the ways of centering elements (really bad jokes are my spread (...) and butter).

A lot of chocolate cakes have similar ingredients.

• Flour
• Butter
• Sugar
• Egg
• Vanilla
• Cocoa
• Chocolate chunks

And a lot of components have similar properties:

• Borders (colours, width, style, radius)
• Paddings
• Position
• Text colour
• Background colour
• Shadows

Depending on how we mix these ingredients/utilities/properties together, we can get different results. That's pretty much the foundation of utility-first methodology.

When breaking down an interface that you have to build, you break it down to the cake mixture: spacing, positioning, colours. Components, or elements, or whatever you'd like to call them - will be made up of those little utilities.

Is this the holy grail?

Well, like most of my answers: it's a big depends. I don't fall into the camp where people love or hate this approach (promised to be controversial), I see the benefits and drawbacks of using utility-first in real life, so let's dig in:

You can build a lot of stuff relatively quickly - you use your chosen framework and go! Once you understand how things work, you can craft beautiful web products with speed. Strip out the classes that aren't used and move on.

You cannot build a meaningful design system - well you can if you start extending your classes and create components, but that's murky waters territory, as it's not Utility first methodology at all.

Perfect for smaller things - if scale isn't a massive issue, go forth and conquer. If you don't need to build a design system from scratch and just want to create a prototype - you do you boo. You will be able to build something quick and painless.

Shite for scale unless you plan ahead - if you have a big project that's not just a tiny passion thing, don't do it. The problems with utility first will come from how verbose the classes become in your CSS. It will become harder to maintain with scale. Unless you start merging it with some other methodology.

You can't write own CSS - Well you can, but you shouldn't. So if you like writing and organising your CSS and enjoy figuring our the cascade and inheritance, sorry chum, this ain't for you.

Don't have to name things - We all hate naming things.

Time to break a few eggs

I'm not here to tell you what methodology to pick. It's all down to your project's needs and how you're used to working (if you want to learn something new, of just want to do something really quick), but hopefully this helps.

Now, I'm off to bake a cake

P.S. The Cake

Image from https://unsplash.com/@brandsandpeople