The Case for Atomic / Utility-First CSS

A collection of various content detailing and demonstrating the benefits of Atomic CSS, also known as Utility First or Functional CSS.

The term Atomic CSS refers to an architectural philosophy, not any one particular library or framework, and encompasses both static (e.g. Tachyons, Tailwind) and programmatic (e.g. Styled Components, Emotion, Theme UI, ACSS.io) approaches. For a clear definition and information on related terminology, read Let’s Define Exactly What Atomic CSS is.

Many of those who brought forth this approach were inspired by the groundbreaking 2009-2011 work of Nicole Sullivan on OOCSS (for more historical context, read this).

Missing something? Suggest new content via GitHub or Twitter

Foundational Posts

Articles and Case Studies

Presentations

Other

Companies Using Atomic CSS in Production