Andrew's Digital Garden

Atomic CSS

Atomic CSS specifies one class for one styling rule Regardless of how it's implemented from a DX point of view, e.g. Tailwind, Vanilla-extract, etc.

Theoretically this scales best on large CSS applications, as the amount of classes will eventually hit a cap, regardless of the amount of CSS written as the CSS stylesheet does not feature any duplication. A component using the same styling across the app will end up using the same class(es).

Broadly there's two styles of atomic CSS:

  • Static: pre-generated library of classes with set variations/atoms
  • Programmatic: uses a build tool to automatically generate styles based on the classes used

Atomic CSS starts to generate [[performance]] benefits at scale. The file size will eventually stop growing, and classes can be easily purged.

[[api]] [[css]] [[cssinjs]]

Atomic CSS