CSS Utility Classes and “Separation of Concerns”

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Adam Wathan takes us on a journey through the different ways we can approach HTML and CSS. This is a really great read that I bet will resonate with a lot of you, whether or not you agree with where he ends up.

Here’s a particularly interesting bit where he specifically calls out “separation of concerns” as being a straw man:

You either have separation of concerns (good!), or you don’t (bad!).This is not the right way to think about HTML and CSS.

Instead, think about dependency direction. There are two ways you can write HTML and CSS:

CSS that depends on HTML … In this model, your HTML is restyleable, but your CSS is not reusable.

HTML that depends on CSS … In this model, your CSS is reusable, but your HTML is not restyleable.

It occurs to me that there are fairly large contingents heading in both directions with styling. One direction is headed toward tightly coupled CSS (i.e. `.vue` files with scoped styles living right next to the template HTML). The other direction is styling classes that are completely de-coupled from HTML (i.e. atomic CSS).

What seems to be least popular is loosely-coupled global styles.

Direct Link →