Kenapa Setup Proyek Itu Penting?

Di kelas dasar, kamu mungkin terbiasa menulis semua CSS dalam satu file style.css yang makin lama makin panjang. Pendekatan ini gagal ketika proyek membesar: satu perubahan warna brand bisa memaksa kamu mencari-cari puluhan tempat, dan konflik antar developer jadi sering terjadi. Modul ini membahas cara menyusun fondasi CSS yang scalable sebelum kita masuk ke Flexbox dan Grid di modul berikutnya.

Arsitektur File: Memisahkan Tanggung Jawab

Pola yang umum dipakai di proyek production adalah membagi CSS berdasarkan fungsi, bukan berdasarkan halaman. Struktur sederhana yang cukup untuk proyek skala menengah:

styles/
  base/
    _reset.css
    _variables.css
    _typography.css
  layout/
    _grid.css
    _header.css
    _footer.css
  components/
    _button.css
    _card.css
    _modal.css
  utilities/
    _spacing.css
    _visibility.css
  main.css

Prinsipnya: base berisi fondasi yang jarang berubah, layout mengatur struktur besar halaman, components berisi elemen UI yang bisa dipakai ulang, dan utilities berisi class kecil bertujuan tunggal (misalnya .mt-4 atau .hidden). File main.css hanya berisi kumpulan @import atau digabung lewat build tool seperti Vite/PostCSS.

Kamu tidak wajib memakai struktur folder persis seperti ini — poinnya adalah konsistensi. Tim yang tahu ke mana harus mencari dan menaruh kode akan jauh lebih cepat dibanding tim yang menebak-nebak.

Custom Properties: Fondasi Design System Sederhana

CSS Custom Properties (variabel CSS) adalah alat utama untuk membangun konsistensi visual. Bedanya dengan preprocessor variable (seperti Sass), custom property bisa diubah secara dinamis lewat JavaScript atau media query, dan nilainya di-resolve di runtime browser.

:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1e40af;
  --color-text: #1f2937;
  --color-bg: #ffffff;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  --radius-sm: 4px;
  --radius-md: 8px;

  --font-base: 1rem;
  --font-lg: 1.25rem;
}

Dengan pola ini, komponen tidak lagi menulis angka mentah:

.card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: var(--color-bg);
}

Keuntungan nyatanya terasa saat ada perubahan brand: ubah satu baris di :root, seluruh halaman ikut berubah. Ini juga mempermudah implementasi dark mode nanti, karena kamu tinggal override variabel di dalam selector [data-theme="dark"] tanpa menyentuh komponen sama sekali.

[data-theme="dark"] {
  --color-text: #f3f4f6;
  --color-bg: #111827;
}

Scoping Custom Properties

Custom property tidak harus selalu didefinisikan di :root. Kamu bisa men-scope-nya ke komponen tertentu untuk membuat variasi lokal tanpa memengaruhi elemen lain:

.button {
  --btn-bg: var(--color-primary);
  background: var(--btn-bg);
}

.button--danger {
  --btn-bg: #dc2626;
}

Pola ini lebih fleksibel dibanding membuat class baru untuk setiap kombinasi warna, terutama saat komponen punya banyak varian.

Reset Modern: Bukan Sekadar Menghapus Margin

Reset CSS lama seperti Eric Meyer's Reset menghapus hampir semua style bawaan browser, termasuk yang sebenarnya berguna (misalnya list style atau font weight heading). Pendekatan modern lebih selektif — sering disebut "modern CSS reset" — dan fokus menyelesaikan masalah yang benar-benar sering muncul saat membangun layout.

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  line-height: 1.5;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

Beberapa poin yang perlu kamu pahami alasannya, bukan cuma dihafal:

• box-sizing: border-box membuat padding dan border ikut terhitung dalam width elemen, sehingga perhitungan layout Grid/Flexbox jauh lebih dapat diprediksi.
• margin: 0 di semua elemen menghindari margin collapse yang tidak terduga antar komponen, terutama saat komponen disusun ulang lewat Flexbox/Grid.
• img, picture, video { display: block; max-width: 100% } mencegah gambar overflow dari container dan menghilangkan whitespace aneh di bawah gambar akibat perilaku default inline.
• font: inherit pada elemen form memastikan input dan button ikut mengikuti tipografi desain, bukan font default browser yang berbeda-beda.
• min-height: 100dvh lebih akurat dibanding 100vh di perangkat mobile karena memperhitungkan toolbar browser yang muncul/hilang.

Reset ini sengaja tidak menghapus semuanya — heading tetap bold, list tetap punya bullet secara default kecuali kamu override di komponen. Tujuannya bukan "membersihkan total", tapi menghilangkan inkonsistensi yang mengganggu proses membangun layout.

Menyusun Urutan Import yang Benar

Urutan file yang di-import memengaruhi specificity dan override. Urutan yang disarankan:

/* main.css */
@import "base/_reset.css";
@import "base/_variables.css";
@import "base/_typography.css";
@import "layout/_grid.css";
@import "layout/_header.css";
@import "components/_button.css";
@import "components/_card.css";
@import "utilities/_spacing.css";

Utilities diletakkan paling akhir karena biasanya dipakai untuk override kecil (misalnya .mb-0 menimpa margin bawaan komponen). Jika urutan ini terbalik, kamu akan sering terjebak menambahkan !important untuk memaksa override — tanda bahwa arsitektur file bermasalah, bukan CSS-nya.

Studi Kasus: Merapikan Proyek Landing Page yang Berantakan

Bayangkan kamu bergabung ke tim yang sedang mengerjakan landing page produk. Kondisi proyek saat ini:

• Semua CSS ada di satu file style.css sepanjang 2000+ baris.
• Warna brand ditulis manual berkali-kali sebagai hex code di puluhan tempat berbeda.
• Tidak ada reset CSS, sehingga tampilan tombol dan form berbeda-beda di Chrome dan Safari.
• Developer lain baru saja menambahkan dark mode dengan cara menduplikasi seluruh file CSS menjadi style-dark.css.

Tugasmu: rapikan fondasinya sebelum fitur baru ditambahkan lagi. Langkah yang bisa kamu coba:

1. Buat struktur folder base/, layout/, components/, utilities/ seperti contoh di atas, lalu pindahkan kode yang relevan sesuai fungsinya (jangan langsung refactor logikanya, cukup pindahkan dulu).
2. Cari semua hex code warna brand yang berulang, lalu definisikan sebagai custom property di _variables.css (misalnya --color-primary). Ganti satu per satu pemakaiannya.
3. Tambahkan modern reset di _reset.css dan pastikan di-import paling awal, lalu cek ulang tampilan form dan tombol di dua browser berbeda.
4. Hapus style-dark.css. Buat dark mode dengan override custom property di dalam selector [data-theme="dark"], sehingga hanya ada satu file CSS yang perlu dirawat.
5. Terakhir, susun urutan @import di main.css sesuai urutan: base → layout → components → utilities.

Setelah lima langkah ini selesai, proyek belum "sempurna", tapi sudah punya fondasi yang predictable — dan ini yang paling penting sebelum kita mulai membangun layout dengan Flexbox dan Grid di modul-modul berikutnya.