Atomic CSS Approach for Website Styles

Atomic CSS Approach for Site Styles

Atomic CSS is a methodology where each CSS class performs exactly one task: one class — one property. mt-4 means margin-top: 1rem. text-center means text-align: center. Component is assembled from many such classes directly in HTML/JSX.

This is the foundation of Tailwind CSS, Windi CSS, UnoCSS. But Atomic CSS is broader: an approach that can be implemented manually or by choosing the right tool for specific constraints.

Manual Atomic CSS implementation

Useful to understand mechanics before using a framework:

/* Spacing */
.m-0  { margin: 0; }
.m-1  { margin: 4px; }
.m-2  { margin: 8px; }
.mt-2 { margin-top: 8px; }
.mb-4 { margin-bottom: 16px; }

/* Flexbox */
.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.items-center { align-items: center; }
.gap-2     { gap: 8px; }

/* Typography */
.text-sm   { font-size: 14px; }
.font-bold   { font-weight: 700; }
.text-center { text-align: center; }

/* Colors */
.text-primary { color: var(--color-primary); }
.bg-white  { background-color: #fff; }
.rounded   { border-radius: 8px; }

Component:

<button class="flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-white rounded">
  Save
</button>

UnoCSS — zero runtime, maximum flexibility

UnoCSS is an engine for generating atomic CSS classes. Has no predefined styles — only rules. Supports Tailwind-compatible presets, icons via Iconify, custom rules.

npm install -D unocss

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS({
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons({
          scale: 1.2,
          warn: true,
        }),
      ],
      theme: {
        colors: {
          primary: '#2563eb',
        },
      },
      rules: [
        ['truncate-2', { overflow: 'hidden', display: '-webkit-box' }],
      ],
      shortcuts: {
        'btn': 'inline-flex items-center gap-2 px-4 py-2 rounded font-medium',
        'btn-primary': 'btn bg-primary text-white hover:bg-blue-600',
      },
    }),
  ],
})