Mengorganisasi File CSS

Proyek sungguhan jarang selesai dengan satu file style.css: begitu baris CSS menembus seribu, mencari satu aturan di antara ratusan selector memakan waktu, dan dua orang yang mengedit file yang sama berpeluang menimpa pekerjaan satu sama lain. Organisasi file adalah keputusan arsitektur pertama yang kita ambil sebelum menulis satu pun aturan baru. Dengan memecah stylesheet menjadi file kecil yang masing-masing menangani satu concern, kita memperoleh tiga hal sekaligus: aturan mudah dicari, tanggung jawab tiap file jelas, dan urutan pemuatan dapat dikendalikan. Chapter ini membahas struktur folder yang lazim, cara mengatur urutan import, serta konvensi penamaan file.

Struktur Folder per Concern #

Pola yang paling umum adalah membagi stylesheet berdasarkan peran masing-masing aturan, bukan berdasarkan halaman:

text
css/
├── base/
│   ├── reset.css
│   ├── variabel.css
│   └── typography.css
├── components/
│   ├── tombol.css
│   ├── kartu.css
│   └── form.css
├── utilities/
│   ├── spasi.css
│   └── teks.css
├── pages/
│   ├── beranda.css
│   └── dashboard.css
└── main.css

Empat kelompok tersebut punya kontrak yang tegas:

Folder	Isi	Aturan yang boleh ditulis
`base/`	Fondasi seluruh situs	Reset, typography global, custom properties
`components/`	Komponen UI	Satu file per komponen, selector berakar satu class
`utilities/`	Kelas kecil satu tugas	Satu class, satu deklarasi
`pages/`	Gaya khusus satu halaman	Seminimal mungkin; pindah ke components bila dipakai ulang

Aturan praktisnya: satu concern per file. components/tombol.css hanya berisi gaya tombol — ketika ada permintaan perubahan tombol, kita tahu persis file mana yang perlu dibuka, dan file tersebut tidak menyentuh bagian lain.

Urutan Import Menentukan Pemenang #

Seluruh file di atas dikumpulkan oleh satu titik masuk, misalnya main.css, atau langsung ditulis sebagai beberapa tag <link> di HTML:

css
main.css
@import url("base/reset.css");
@import url("base/variabel.css");
@import url("base/typography.css");
@import url("components/tombol.css");
@import url("components/kartu.css");
@import url("utilities/spasi.css");
@import url("pages/dashboard.css");

Urutan baris di atas bukan sekadar kerapian. Bila dua aturan menunjuk elemen yang sama dengan specificity setara, aturan dari file yang diimpor belakangan yang menang — mekanisme source order ini kita bedah pada Chapter Specificity dan Source Order . Karena itu arah urutannya disiplin: dari yang paling dasar (base) menuju yang paling spesifik kebiasaan penggunaan (pages, utilities). Dengan urutan tetap ini, sebuah utility class dapat menimpa gaya komponen tanpa perlu memperkuat selector.

Mari kita buktikan dengan demo chapter ini. Demo meniru dua file yang diimpor berurutan dan menunjuk class yang sama:

css
base/notifikasi.css
.notifikasi {
  color: rgb(71, 85, 105);
  background-color: rgb(241, 245, 249);
  padding: 12px 16px;
  border-left: 4px solid rgb(148, 163, 184);
}

css
components/notifikasi-info.css
.notifikasi {
  color: rgb(2, 132, 199);
  background-color: rgb(224, 242, 254);
  border-left-color: rgb(2, 132, 199);
}

Hasil di Browser:

text
Notifikasi tampil dengan warna teks biru rgb(2, 132, 199) dan latar
rgb(224, 242, 254) — nilai dari file kedua yang diimpor belakangan.
Padding-top tetap 12px dan border-left tetap 4px karena hanya ditulis
di file pertama; deklarasi yang tidak ditimpa tetap berlaku.

Mari kita telaah apa yang terjadi:

File pertama mendefinisikan empat properti .notifikasi: warna teks, latar, padding, dan border kiri abu-abu.
File kedua menulis ulang tiga properti yang sama dengan specificity yang persis identik (satu class).
Karena specificity setara, browser memutuskan lewat source order: deklarasi yang muncul belakangan menang, sehingga warna dan latar berasal dari file kedua.
Properti yang tidak ditulis ulang di file kedua (padding) tetap memakai nilai file pertama — menimpa (override) bersifat per properti, bukan per aturan.

Konvensi Nama File #

Dua aturan kecil yang menyelamatkan banyak waktu:

kebab-case, huruf kecil semua: tombol-utama.css, bukan TombolUtama.css. Server web umumnya peka huruf besar-kecil, dan nama ini konsisten dengan konvensi class yang kita bahas pada Chapter Naming Conventions .
Nama file = nama concern: kartu.css berisi kartu, spasi.css berisi utility spacing. Hindari nama samar seperti misc.css atau tambahan.css yang menjadi tempat pembuangan aturan tanpa identitas.

Dengan struktur dan urutan yang stabil, bab-bab berikutnya — component-based CSS, BEM, hingga cascade layers — dapat dibangun di atas fondasi yang sama tanpa mengubah ulang kerangka filenya.