Utility-first CSS: Ridiculously fast front-end development for almost every designSascha WolffBlockedUnblockFollowFollowingMay 26I clearly remember the moment I first understood the brilliance of utility-first CSS.
It’s not that long time ago.
My team and I worked on an implementation of a Sketch design in HTML/CSS with Bootstrap 4.
We just upgraded from Bootstrap 3 to 4 and one team member started to use oddly looking CSS classes on the component he was working on.
At first I couldn’t understand what he was doing.
But the more we looked at the HTML he created, the more we understood the elegance of this approach.
We shifted almost immediately to this new approach in all our projects.
Only weeks later I learned that this approach has a name: Utility-first CSS.
Today I’m totally convinced that this is by far the fastest, most robust and a low-maintenance way of creating fully responsive web applications these days.
And now I want to show you why!The basicsUtility-first CSS is all about what kind of CSS classes you create and what they do.
Instead of naming classes semantic, we’ll use a non-semantic way.
Because naming things is hard; maybe it’s the hardest thing in programming at all.
To find an appropriate name for a component, its elements and modifiers is tough.
Methodologies like BEM are really helping, especially in big teams, but it’s not solving anything.
And not everyone can be a BEM specialist, so the output of the team is vague.
But here comes Utility-first CSS to the rescue.
Lets start with the little thingsA good starting point are the helper classes for things like margin, padding, shadow, etc.
They are easy to use and have a big impact on your design.
Most of these classes are self-explanatory, so I will refrain from giving you long documentation, but will explain why you should use it.
Margin & PaddingWhen we take a look at margin & padding we have 4 sides: top, right, bottom and left.
Beside the side, we also want to configure the size of the property.
Bootstrap 4 uses a range from 0 to 5 as default to set the size.
The size will be multiplied with a $spacer Sass variable.
You can add more spacer classes by compiling the Bootstrap SCSS yourself.
Now, how to use it?.Easy!.
{property}{side}-{size}For example:.
mt-5 for margin-top: 3rem.
pb-3 for padding-bottom: 1rem.
px-2 for padding-left and padding-right: 0.
5remOther frameworks can have wider ranges or sometimes pixel values.
The classes can be combined with breakpoint abbreviations for situations when you want smaller or bigger values on mobile screens.
I’m pretty sure these classes will be your most used ones.
And it’s pretty clever to use them whenever possible.
Lets have a look on this example:A typical pricing table made with the card component of Bootstrap 4.
<div class="card"> <div class="card-body"> .
</div></div>So you have used the standard card component from bootstrap.
You have customized the look and you have inserted your content.
But now you want to reuse the card component like this:The same card component but with more padding to let the text breath…In the good ol’ days you would have created a new CSS class like .
pricing-table or .
my-other-card to add or remove the desired padding.
But why?.It’s so much easier:<div class="card"> <div class="card-body p-5"> .
</div></div>As a rule of thumb: Use utility classes when the padding or margin is just a matter of personal preference or context of usage.
And add the property to a class like .
pricing-list when the design doesn’t work with another size or when it’s absolutely forbidden to change it.
This way you get highly reusable components.
TextsPhoto by Amador Loureiro on UnsplashSo after a long section about margins & paddings, the following paragraphs will be shorter (pinky promise ????).
I think the following classes are totally self-explaining:<p class="text-justify">I'm justified.
</p><p class="text-left">You've left me.
</p><p class="text-center">I'm centered.
</p><p class="text-right">I'm always right.
</p><p class="text-lowercase">Unfortunately I'm low.
</p><p class="text-uppercase">But now I'm UPSET!</p><p class="text-capitalize">I'm capitalized, no matter what you do.
</p><p class="font-weight-bold">Bold text.
</p><p class="font-weight-bolder">Bolder weight text (relative to the parent element).
</p><p class="font-weight-normal">Normal weight text.
</p><p class="font-weight-light">Light weight text.
</p><p class="font-weight-lighter">Lighter weight text (relative to the parent element).
</p><p class="font-italic">Italic text.
</p><p class="text-wrap" style="width: 50px">I'm a (w)rapper.
</p><p class="text-nowrap" style="width: 50px">I never wrap.
</p>You can combine the text alignment classes with responsiveness:<p class="text-sm-justify">I'm justified.
</p><p class="text-md-left">You've left me.
</p><p class="text-lg-center">I'm centered.
</p><p class="text-xl-right">I'm always right.
</p>The more unknown, but absolutely neat classes:<p class="text-truncate">I'm getting ellipsis when I become too long</p><p class="text-break">IWon'tDestroyYourComponents'Layout,Promise!</p><a class="text-reset text-decoration-none">I don't look like a link, but like my parent.
</a>ColorsPhoto by Guy Stevens on UnsplashTraditionally you have 9 colors in Bootstrap 4:primarysecondarysuccessdangerwarninginfolightdarkwhiteBut the list could be longer when you customize Bootstrap with your own color set.
And for of these colors you have utility classes, of course!<span class="text-primary">My text color is primary.
</span><div class="bg-success text-light">My background is success and my text is light.
</div>ShadowsPhoto by Jon Tyson on UnsplashYou want a quick shadow on one of your elements?.Easy:<div class="shadow-none">This removes a default shadow.
</div><div class="shadow-sm">A small shadow.
</div><div class="shadow">A normal shadow.
</div><div class="shadow-lg">A slightly bigger shadow.
</div>The helpers for grid, flexbox and responsivenessGridTechnically the idea of a grid is some kind of an early stage of Utility-first CSS.
Instead of naming your component .
super-fancy-component and giving it width: 33.
3333333% , you just wrapped it in a .
col-3 .
I’m not going to explain the whole concept of a grid to you, because you already know it (at least I hope so) and it’d be boring.
Instead we directly jump to more exciting classes.
FlexboxIn my opinion the flexbox helpers are the most powerful ones.
Nearly all of us are using some kind of grid.
But grids are mostly for positioning and sizing of components, not the components itself.
Sometimes you just want to align a group of buttons near a text and the text should grow and take up as much space as possible without moving the buttons to the next line (like, you know… basic flexbox stuff).
This is one of the simplest examples:A simple .
ml-auto is always better than introducing a new class.
<div class="card"> <div class="card-header"> <h4 class="card-header-title">Card title</h4> <div class="ml-auto flex-grow-0"> <button class="btn btn-success">Save</button> </div> </div> <div class="card-body"> <p class="card-text"> .
</p> </div></div>Why should you introduce a new class like .
card-header-buttons , when a simple .
ml-auto.
flex-grow-0 is enough?Of course you still need to know everything about flexbox.
A good resource of knowledge is https://css-tricks.
com/snippets/css/a-guide-to-flexbox/.
I will refrain from enumerating every helper class for you, because there is nothing better than the bootstrap documentation itself: https://getbootstrap.
com/docs/4.
3/utilities/flex/.
Just for your overview, there are classes like .
flex-grow-1 | .
flex-grow-0 | .
justify-content-center | .
align-items-stretch | .
d-flex .
You see how this works…ResponsivenessPhoto by Domenico Loia on UnsplashOf course the most utility classes are available in responsive variations.
I already mentioned it at some points, but I’ll repeat it here for clearness:Often you can combine utility classes with breakpoint abbreviations.
So a text can be left aligned on desktop and centered on mobile screens.
When you try to create your own utility classes with SCSS, you should think about this from the beginning.
ConclusionWhether you use some great frameworks like Bootstrap 4, Tailwind CSS or others, you should always look for utility classes to use.
It will make your life easier and increase the maintainability of your project.
But even when you use other frameworks like Foundation or custom CSS, you can extend them with your own utility classes.
To iterate over some SCSS variables and create a bunch utility classes is no sweat, but it will save you and your coworkers a lot of time.
.