CSS Minimalis yang Efektif

Di era Tailwind CSS dan CSS-in-JS, menulis CSS "biasa" semakin terasa asing bagi banyak developer. Tapi ada nilai tersendiri dalam memahami CSS secara mendalam — tanpa lapisan abstraksi di atasnya.

Kenapa Tidak Pakai Tailwind Saja?

Tailwind bagus. Saya tidak anti-Tailwind. Tapi ada beberapa situasi di mana CSS custom lebih masuk akal:

• Project kecil — overhead Tailwind tidak sebanding
• Kontrol penuh — kamu yang tentukan semua
• Belajar lebih dalam — memaksa kamu memahami cascade dan specificity

Prinsip Utama

1. Gunakan CSS Custom Properties (Variables)

Alih-alih menyebar nilai hardcoded di mana-mana, centralize semua nilai ke dalam :root:

:root {
  --color-bg: #0e0e0e;
  --color-text: #f0f0f0;
  --color-muted: #888;
  --space-4: 16px;
  --space-8: 32px;
  --radius: 8px;
  --transition: 0.2s ease;
}

Manfaatnya: mengubah satu variabel langsung mempengaruhi semua tempat yang menggunakannya.

2. Desain dengan Skala

Buat skala untuk spacing, font size, dan ukuran lainnya — dan patuhi skala tersebut:

/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;

3. Utamakan Layout dengan Grid dan Flexbox

Dua alat ini sudah cukup untuk hampir semua kebutuhan layout modern:

/* Centered container */
.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Flexbox untuk perataan sederhana */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Grid untuk layout dua kolom */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
}

4. Komponen CSS, Bukan Utility Class

Daripada menulis class utility seperti .text-sm, .font-bold, .p-4, lebih baik buat komponen:

/* Bukan ini: */
<div class="text-sm font-mono text-gray-400 border rounded px-3 py-1">

/* Tapi ini: */
.tag {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--color-muted);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 12px;
}

5. Transisi yang Halus

Tambahkan transisi pada interaksi hover untuk rasa yang lebih premium:

.button {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.button:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

Struktur File yang Saya Gunakan

src/
└── app.css
    ├── — Design tokens (variables)
    ├── — Reset & base styles
    ├── — Typography
    ├── — Layout utilities
    ├── — Component styles (card, tag, button)
    └── — Utility classes (minimal)

Satu file besar bisa menjadi masalah jika project berkembang — tapi untuk website personal, ini sudah lebih dari cukup.

CSS minimalis bukan berarti CSS yang fungsional saja. Ini tentang CSS yang disengaja — setiap baris ada alasannya, dan setiap keputusan visual terasa kohesif.