why-I-like-CSS-utillity-classes

2018-02-22

What Are CSS Utillity Classes?

CSS Utillities classes are simply classes which do a specific thing - which typically has nothing to do with the website’s identity but instead how the website behaves. For example “container” - would be a utillity class which wraps a peice of content and likely makes it responsive. Utillities are intended to be combined with other utillities to build the individual components (parts) of your website without you having to use a “pre-determined” component such as “vertical-navigation-bar”, for example, one peice of markup may look like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13

 
<!-- Markup --> 
<img class="responsive angled-45" /> 
/* CSS Utillities (utils.css) */ 
.responsive { 
	width: 100%;
	height: auto;
} 
.angled-45 { 
	transform: rotate(45deg); 
} 

You may have used utillity classes before (you probably call them helpers). Please be aware that I’m still a “young” developer so my opinion may change/evolve.

They give me freedom

CSS Utilliy classes give me freedom as I can mix and match them with other CSS tolls such as frameworks, pre-processors etcetera incredibly easily. I can even use other people’s utillities along side my own custom utillities.

And unlike frameworks, they don’t get in my way (compared to other tools I’ve used) since they are typically easy to customize and as I said - they have little to no effect on my website’s overall (visual) identity and thus don’t result in me “using someone else’s creativity”.

They’re predictable

Assuming they are named to my favouring, just by looking at the class-name I can easily predict what they should and shouldn’t do. Thus, I don’t feel “constrained” when it comes to using them. And as I said, if I don’t like it as it comes - chances are I can easily customize it. And I can easily tell if its the utillity or my code giving me issues.

They allow for seperation of concerns

As they typically have nothing to do with the website’s identity - I can have a utillity-section of code for my website and a visual-section of code for my website, this is great as I’m more likely to re-use the utillities without being bogged down by code I don’t need.

They typically require minimal markup

Most times, they don’t depend on a particular HTML tag nor set of tags, and as CSS utillities typically play well with each other when applied to the same tag - I can use the same class-attribute.

Learn more

If you’re keen to delve into the world of CSS utillity classes, here are some resources to help:

• “Tailwind Framework”: https://tailwindcss.com
• The Role of Utilliy Classes in Scalable CSS: http://davidtheclark.com/on-utility-classes/