Atomic CSS підхід для стилів сайту
Atomic CSS — методологія, при якій кожен CSS-клас виконує рівно одне завдання: один клас — одна властивість. mt-4 означає margin-top: 1rem. text-center означає text-align: center. Компонент збирається з багатьох таких класів прямо в HTML/JSX.
Це те, що лежить в основі Tailwind CSS, Windi CSS, UnoCSS. Але Atomic CSS — шире: це підхід, який можна реалізувати вручну або вибравши потрібний інструмент під конкретні обмеження.
Ручна реалізація Atomic CSS
Корисно зрозуміти механіку перед використанням фреймворку:
/* 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; }
Компонент:
<button class="flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-white rounded">
Зберегти
</button>
UnoCSS — нульовий runtime, максимальна гнучкість
UnoCSS — рушій для генерації атомарних CSS-класів. Не має предопрацьованих стилів — тільки правила. Підтримує Tailwind-сумісні пресети, іконки через Iconify, користувацькі правила.
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',
},
}),
],
})