Struktur CSS untuk Proyek

Setiap chapter di section ini menyumbang satu kebiasaan: token untuk nilai berulang, nama yang konsisten, urutan bagian yang jelas, dan fondasi reset yang rata. Chapter penutup ini menyatukan semuanya menjadi arsitektur stylesheet untuk proyek utuh — lima berkas dengan tugas dan urutan yang pasti. Dengan struktur ini, menambah fitur berarti menaruh aturan di tempat yang sudah disepakati, bukan menumpuknya di ujung berkas.

Lima Berkas Inti #

Arsitektur yang dipakai banyak proyek modern terdiri atas lima berkas dengan tanggung jawab tunggal:

text
css/
├── tokens.css       → custom property: warna, jarak, radius, font
├── base.css         → reset minimal + gaya elemen dasar
├── layout.css       → kerangka halaman: header, footer, grid utama
├── components.css   → komponen: tombol, kartu, badge, form
└── utilities.css    → class utilitas kecil satu tugas

Rinciannya seperti tabel berikut:

Berkas	Tanggung jawab	Contoh isi
`tokens.css`	menyimpan keputusan desain sebagai custom property	`--warna-utama`, `--jarak-konten`
`base.css`	meratakan bawaan dan mengatur elemen dasar	reset minimal, `body`, `a`, `img`
`layout.css`	menyusun kerangka halaman	`.tata-halaman`, `.kepala-situs`
`components.css`	komponen yang dipakai ulang di banyak halaman	`.tombol`, `.kartu-produk`
`utilities.css`	class kecil satu deklarasi	`.rata-tengah`, `.penuh-lebar`

Urutan Pemuatan yang Disepakati #

Kelima berkas dimuat dalam urutan yang tidak boleh diacak:

html
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/utilities.css">

Urutan ini punya alasannya masing-masing:

tokens.css paling awal: nilainya dipakai var() oleh berkas-berkas setelahnya, dan berkas ini berperan sebagai dokumen keputusan desain.
base.css sebelum komponen: gaya elemen dasar menjadi lapisan bawah yang boleh ditimpa komponen.
utilities.css paling akhir: class utilitas memang dirancang untuk menimpa, jadi ia butuh posisi terakhir di source order.

Alternatifnya, seluruh urutan dapat dikumpulkan dalam satu titik masuk:

css
/* main.css — satu titik masuk seluruh stylesheet */
@import "tokens.css";
@import "base.css";
@import "layout.css";
@import "components.css";
@import "utilities.css";

Keduanya sah. Lima tag <link> lebih mudah terbaca langsung di HTML; satu berkas main.css memangkas baris link dan menempatkan keputusan urutan pada satu tempat. Pilih salah satu lalu pertahankan — memakai dua mekanisme sekaligus hanya menambah kebingungan.

Isi tokens.css yang Sehat #

css
/* tokens.css — sumber kebenaran nilai desain */
:root {
  /* Warna */
  --warna-teks: #1f2933;
  --warna-latar: #ffffff;
  --warna-utama: #14503a;
  --warna-utama-muda: #e6f2ec;
  --warna-bahaya: #b3261e;

  /* Jarak dan radius */
  --jarak-kecil: 8px;
  --jarak-sedang: 16px;
  --radius-sedang: 12px;

  /* Tipografi */
  --font-dasar: system-ui, sans-serif;
  --ukuran-teks: 16px;
}

Setelah token didefinisikan, berkas lain cukup memanggil var(--warna-utama); memperbarui satu baris token mengubah seluruh tombol dan aksen di proyek sekaligus.

Tiga kebiasaan menjaga berkas token tetap sehat: nama mengikuti peran, bukan tampilan (recap chapter naming conventions); kelompok dipisah komentar; dan setiap token benar-benar dipakai — token yang tidak terpakai dilepas agar daftarnya tetap jujur.

Kapan Berkas Perlu Dipecah Lagi #

Struktur lima berkas bukan garis akhir. Tanda siap dipecah:

components.css menembus sekitar 800-1000 baris dan pencarian mulai melambat;
fitur besar masuk (panel chat, peta interaktif) dan aturannya berdiri sendiri;
lebih dari satu orang menulis CSS pada berkas yang sama;
satu komponen tumbuh lebih dari ±150 baris.

Pecahkan mengikuti tanggung jawab, bukan jumlah baris semata. Lima berkas yang jelas lebih baik daripada dua belas berkas yang isinya saling menumpang.

Ide Pelapisan ala ITCSS #

Metodologi yang menginspirasi susunan seperti ini adalah ITCSS (Inverted Triangle CSS): aturan paling generik dengan specificity paling rendah ditulis lebih dulu, lalu makin ke bawah makin spesifik. Arsitektur lima berkas mengikuti ide yang sama: token dan base paling generik, komponen makin khusus, utilitas paling eksplisit — dan justru karena itulah utilitas diletakkan paling akhir, agar kekuatan menimpanya datang dari urutan, bukan dari selector yang dipersulit.

Demo berikut merangkai halaman kecil dari lima blok <style>, masing-masing mewakili satu berkas dalam urutan pemuatan yang disepakati:

Perhatikan tombol Tambah ke Keranjang: komponen .tombol bertemu utilitas .penuh-lebar dari lapisan terakhir — komposisi inilah alasan utilitas dimuat paling akhir.

Ringkasan #

Arsitektur proyek yang sehat menyimpan keputusan desain di tokens.css, meratakan bawaan di base.css, menyusun kerangka di layout.css, mengisi komponen di components.css, dan menutup dengan utilities.css — semuanya dimuat dalam urutan dari generik ke khusus. Struktur ini fleksibel: sesuaikan jumlah berkas dengan ukuran proyek, tetapi pertahankan urutan lapisan dan disiplin penamaan yang dibangun sepanjang section ini. Fondasi yang rapi itulah bekal masuk ke section berikutnya, Accessibility dan Debugging, tempat kita memastikan halaman nyaman dipakai semua pengguna dan mudah diperiksa saat tampilan tidak sesuai harapan.