When I published Expressive CSS a few months ago, I knew it would be controversial, and it was (as evidenced in the comments on my Content & Display Patterns with Expressive CSS post). In the time since, there have been many articles and projects published by others that also advocate lightweight, scalable CSS using utility classes that are easy to write and understand.

From what I can tell, Thierry Koblentz was the first to really challenge CSS conventional wisdom with what in 2013 he dubbed the atomic approach. Whether you call it atomic, functional, expressive or something else, people are realizing that for too long we have been stuck in this dogmatic pursuit of semantics which has held us back from crafting CSS in a way that is actually maintainable and scalable.

There are still people who strongly reject this approach (for example, the so-called Maintainable CSS project). A few years ago, I would have been one of those people. Read CSS and Scalability and Rationalizing Functional CSS to understand why companies with large CSS architectures are switching to the Atomic/Functional/Expressive approach.

Here are some recent real world implementations:

When companies publish their frameworks, people often ask why not use an existing framework. Just take bootstrap and fork it. Better yet, use BassCSS or Tachyons.

Well, when you write CSS this way, creating a custom CSS architecture designed exactly for your project’s needs is not that hard and is actually fun. And if you do it right, changing things down the road is no big deal if you are using a CSS preprocessor and HTML templates. That is the benefit of the atomic approach!