My approach to writing CSS these days lays somewhere in between Andy Bell’s CUBE CSS and Harry Roberts’ ITCSS. I prefer Andy’s definition of a utility class from the CUBE CSS docs:

A utility, in the context of CUBE CSS, is a CSS class that does one job and does that one job well.

I’m writing this post to keep track of all of my favorite utilities–things I find myself reusing in almost every project.

Visually Hidden #

.vis-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0; 
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }

If you ever used Bootstrap, you may recognize this as the sr-only class—in which sr stands for screen reader. I learned something from Melanie Richards’ recent learning log and am using the vis-hidden class name from now on:

This content is visually hidden; screen readers are not the only assistive tech that can access the hidden text on behalf of the user.

Uppercase Text #

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 1px;
}

When you want something displayed in all capital letters, but you need assistive technology to read it predictably. Adding in a little bit of letter spacing makes it a little easier to read a word set in all caps.

Circular Images #

.img-circle {
    border-radius: 50%;
}

This is great, whether you need a circular image for a user's avatar or in an "art-directed" post.

Flex Objects #

.flexo {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5em;
  }
  
  .flexo > * {
    flex: 1 0 18em;
    margin: 0.75em;
  }

A G-rated version of Heydon Pickering’s "Fukol Grid". Turns anything nested in a div with a class of flexo into a flexible object (View demo).

Unstyled List #

.list-unstyled {
    list-style: none;
    padding: 0;
  }

Another one you may recognize from Bootstrap. Sometimes you may need to remove the bullets in an unordered list or (less common) the numbers in an ordered list.

Multicolumn List #

.list-multi-col{
	column-width: 12em;
	column-gap: 2em;
}

Helpful for displaying long lists of short words or terms. Think of a donor wall at a museum for a real-life example. I’ve used this pattern on advocacy.tennessee.edu and data.tennessee.edu.

In fact, I’ve found these so useful, all six of these utilities (plus a few more) have made their way into the nicksimson.com codebase.