So you need a CSS utility library?

Avatar of Chris Coyier
Chris Coyier on

Let’s define a CSS utility library as a stylesheet with many classes available to do small little one-off things. Like classes to adjust margin or padding. Classes to set colors. Classes to set specific layout properties. Classes for sizing. Utility libraries may approach these things in different ways, but seem to share that idea. Which, in essence, brings styling to the HTML level rather than the CSS level. The stylesheet becomes a dev dependency that you don’t really touch.

Using ONLY a utility library vs. sprinkling in utilities

One of the ways you can use a utility library like the ones to follow as an add-on to whatever else you’re doing with CSS. These projects tend to have different philosophies, and perhaps don’t always encourage that, but of course, you can do whatever you want. You could call that sprinkling in a utility library, and you might end up with HTML like:

<div class="module padding-2">
  <h2 class="section-header color-primary">Tweener :(</h2>
</div>

Forgive a little opinion-having here, but to me, this seems like something that will feel good in the moment, and then be regrettable later. Instead of having all styling done by your own named classes, styling information is now scattered. Some styling information applied directly in the HTML via the utility classes, and some styling is applied through your own naming conventions and CSS.

The other option is to go all in on a utility library, that way you’ve moved all styling information away from CSS and into HTML entirely. It’s not a scattered system anymore.

I can’t tell you if you’ll love working with an all in utility library approach like this or not, but long-term, I imagine you’ll be happier picking either all-in or not-at-all than a tweener approach.

This is one of the definitions of Atomic CSS

You can read about that here. You could call using a utility library to do all your styling a form of “static” atomic CSS. That’s different from a “programatic” version, where you’d process markup like this:

<div class="Bd Bgc(#0280ae):h C(#0280ae) C(#fff):h P(20px)">
    Lorem ipsum
</div>

And out would come CSS that accommodates that.

Utility Libraries

Lemme just list a bunch of them that I’ve come across, pick out some quotes of what they have to say about themselves, and a code sample.

Shed.css

Shed.css came about after I got tired of writing CSS. All of the CSS in the world has already been written, and there’s no need to rewrite it in every one of our projects.

Goal: To eliminate distraction for developers and designers by creating a set of options rather than encouraging bikeshedding, where shed gets its name.

<button
  class="
    d:i-b
    f-w:700
    p-x:3
    p-y:.7
    b-r:.4
    f:2
    c:white
    bg:blue
    t-t:u
    hover/bg:blue.9
  "
>
  Log In
</button>

Tachyons

Create fast loading, highly readable, and 100% responsive interfaces with as little CSS as possible.

<div class="mw9 center pa4 pt5-ns ph7-l">
      <time class="f6 mb2 dib ttu tracked"><small>27 July, 2015</small></time>
      <h3 class="f2 f1-m f-headline-l measure-narrow lh-title mv0">
        <span class="bg-black-90 lh-copy white pa1 tracked-tight">
          Too many tools and frameworks
        </span>
      </h3>
      <h4 class="f3 fw1 georgia i">The definitive guide to the JavaScript tooling landscape in 2015.</h4>
</div>

Basscss

Using clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code.

<div class="flex flex-wrap items-center mt4">
  <h1 class="m0">Basscss <span class="h5">v8.0.2</span></h1>
  <p class="h3 mt1 mb1">Low-Level CSS Toolkit <span class="h6 bold caps">2.13 KB</span></p>
  <div class="flex flex-wrap items-center mb2">
  </div>
</div>

Beard

A CSS framework for people with better things to do

Beard’s most popular and polarizing feature is its helper classes. Many people feel utility classes like the ones that Beard generates for you leads to bloat and are just as bad as using inline styles. We’ve found that having a rich set of helper classes makes your projects easier to build, easier to reason, and more bulletproof.

<div class="main-content md-ph6 pv3 md-pv6">
    <h2 class="tcg50 ft10 fw3 mb2 md-mb3">Tools</h2>
    <p class="tcg50 ft5 fw3 mb4 lh2">Beard isn't packed full of every feature you might need, but it does come with a small set of mixins to make life easier.</p>

    <h3 class="tcg50 ft8 fw3 mb2 md-mb3">appearance()</h3>
</div>

turretcss

Developed for design, turretcss is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.

<section class="background-primary padding-vertical-xl">
  <div class="container">
      <h1 class="display-title color-white">Elements</h1>
      <p class="lead color-white max-width-s">A guide to the use of HTML elements and turretcss's default styling definitions including buttons, figure, media, nav, and tables.</p>
  </div>
</section>

Expressive CSS

  • Classes are for visual styling. Tags are for semantics.
  • Start from a good foundation of base html element styles.
  • Use utility classes for DRY CSS.
  • Class names should be understandable at a glance.
  • Responsive layout styling should be easy (fun even).
<section class="grid-12 pad-3-vert s-pad-0">
    <div class="grid-12 pad-3-bottom">
        <h3 class="h1 pad-3-vert text-light text-blue">Principles</h3>
    </div>
    <div class="grid-12 pad-3-bottom">
        <h4 class="pad-1-bottom text-blue border-bottom marg-3-bottom">Do classes need to be ‘semantic’?</h4>
        <p class="grid-12 text-center">
                <span class="bgr-green text-white grid-3 s-grid-12 pad-2-vert pad-1-sides">Easy to understand</span>
                <span class="grid-1 s-grid-12 pad-2-vert s-pad-1-vert pad-1-sides text-green">+</span>
                <span class="bgr-green text-white grid-3 m-grid-4 s-grid-12 pad-2-vert pad-1-sides">Easy to add/remove</span>
                <span class="grid-1 s-grid-12 pad-2-vert s-pad-1-vert pad-1-sides text-green">=</span>
                <span class="bgr-green text-white grid-2 m-grid-3 s-grid-12 pad-2-vert pad-1-sides">Expressive</span>
        </p>
    </div>
</section>

Tailwind CSS

A Utility-First CSS Framework for Rapid UI Development

This thing doesn’t even exist yet and they have more than 700 Twitter followers. That kind of thing convinces me there is a real desire for this stuff that shouldn’t be ignored. We can get a peak at their promo site though:

<div class="constrain-md md:constrain-lg mx-auto pt-24 pb-16 px-4">
    <div class="text-center border-b mb-1 pb-20">
        <div class="mb-8">
            <div class="pill h-20 w-20 bg-light p-3 flex-center flex-inline shadow-2 mb-5">
                
            </div>
        </div>
    </div>
</div>

Utility Libraries as Style Guides

Marvel

As Marvel continues to grow, both as a product and a company, one challenge we are faced with is learning how to refine the Marvel brand identity and apply it cohesively to each of our products. We created this styleguide to act as a central location where we house a live inventory of UI components, brand guidelines, brand assets, code snippets, developer guidelines and more.

<div class="marginTopBottom-l textAlign-center breakPointM-marginTop-m  breakPointM-textAlign-left breakPointS-marginTopBottom-xl">
  <h2 class="fontSize-xxxl">Aspect Ratio</h2>
</div>

Solid

Solid is BuzzFeed’s CSS style guide. Influenced by frameworks like Basscss, Solid uses immutable, atomic CSS classes to rapidly prototype and develop features, providing consistent styling options along with the flexibility to create new layouts and designs without the need to write additional CSS.

<div class="xs-col-12 sm-col-9 lg-col-10 sm-offset-3 lg-offset-2">
   <div class="xs-col-11 xs-py3 xs-px1 xs-mx-auto xs-my2 md-my4 card">
      <h1 class="xs-col-11 sm-col-10 xs-mx-auto xs-border-bottom xs-pb3 xs-mb4 sm-my4">WTF is Solid?</h1>
      <div class="xs-col-11 sm-col-10 xs-mx-auto">
         <section class="xs-mb6">
            <h2 class="bold xs-mb2">What is Solid?</h2>
         </section>
         <section class="xs-mb6">
            <h2 class="bold xs-mb2">Installation</h2>
            <p class="xs-mb2">npm install --save bf-solid</p>
         </section>
         <section class="xs-mb6 xs-hide sm-block">
            <h2 class="bold xs-mb2">Download</h2>
            <p>
               <a href="#" download="" class="button button--secondary xs-mr1 xs-mb1">Source Files</a>
            </p>
         </section>
      </div>
   </div>
</div>

This is separate-but-related to the idea of CSS-in-JS

The tide in JavaScript has headed strongly toward components. Combining HTML and JavaScript has felt good to a lot of folks, so it’s not terribly surprising to see styling start to come along for the ride. And it’s not entirely just for the sake of it. There are understandable arguments for it, including things like the global nature of CSS leading toward conflicts and unintended side effects. If you can style things in such a way that never happens (which doesn’t mean you need to give up on CSS entirely), I admit I can see the appeal.

This idea of styling components at the JavaScript level does seem to largely negate the need for utility libraries. Probably largely a one or the other kind of thing.