So you need a CSS utility library?

shed

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.

Utility Libraries

Here are some lists of CSS utility libraries that you can play with.

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.

Tachyons

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

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.

Beard

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. This approach is more common in web application contexts, which is where Beard was born out of.

turretcss

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

 

Tailwind CSS

“A Utility-First CSS Framework for Rapid UI Development”

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

By adopting inline styles, we can get all of the programmatic affordances of JavaScript. This gives us the benefits of something like a CSS pre-processor (variables, mixins, and functions). It also solves a lot of the problems that CSS has, such as global namespacing and styling conflicts.

For a deep dive into the problems that CSS in JavaScript solves, check out the famous presentation: React CSS in JS.

 

Source: https://css-tricks.com/need-css-utility-library/

Please follow and like us: