What is Atomic CSS and how does it work

Short answer

Atomic CSS is a methodology where each class applies exactly one style rule. Composing many atomic classes builds complete designs without writing custom CSS.

How it works

Instead of .btn { padding: 1rem; background: blue; }, you use .p-4 and .bg-blue. The stylesheet contains every possible utility, and HTML carries the design intent.

Example

<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Click me
</button>

Why it matters

Atomic CSS eliminates stylesheet growth, reduces naming decisions, and enables rapid prototyping. The trade-off is more verbose HTML and a learning curve for class names.

Tips

• Use a build tool to purge unused utilities.
• Atomic CSS pairs well with design tokens.
• Not ideal for highly bespoke, art-directed pages.