[sdnguyen90]

I’ve been using utility classes for a few years now. Some thoughts I’ve come up with:

For content heavy sites like ecommerce/marketing/blogs, I use pretty much utility classes exclusively. There usually isn’t much reuse of UI components on these types of sites so maintenance is much simpler compared to semantic classes. With semantic classes you’ll have a lot of one off styles.

I actually really enjoy writing sites like these since I can code a site start to finish without touching any CSS files. Using utility classes I probably finish 25%-50% faster than if I were to use semantic classes.

On more web app type things like admin panels, I use a mix of mostly semantic classes and a few utility classes. I only use utilities to make sure there aren’t a million different padding/margin/font size values.

In the earlier days of React I tried using all utility classes and it just felt like there was too much going on in the JSX. If you use utility classes, you know the class attribute can get pretty long - sometimes needing to be broken into 2 lines. The CSS tooling with Webpack has come a long way and solves a lot of the problems that all the utility class frameworks were trying to solve around 2015.