Struktur Folder CSS

Satu halaman dengan satu berkas CSS memang masih sederhana. Masalah mulai muncul saat proyek bertambah: halaman baru bermunculan, berkas JavaScript ikut menumpuk, dan gambar tersebar tanpa pola. Struktur folder yang disepakati sejak awal mencegah semua itu, dan pada chapter ini kita menyusunnya untuk proyek latihan kita.

Struktur Proyek yang Sehat #

Berikut susunan folder yang umum dipakai proyek web pemula hingga menengah:

text
proyek-latihan/
├── index.html
├── halaman/
│   └── tentang.html
├── css/
│   ├── styles.css
│   ├── layout.css
│   └── komponen.css
├── js/
│   └── utama.js
└── assets/
    └── logo.svg

Tugas setiap folder:

Folder	Isi
`css/`	Seluruh berkas style sheet
`js/`	Berkas JavaScript
`assets/`	Gambar, ikon, dan font
`halaman/`	Halaman HTML selain index

Dengan batasan ini, setiap jenis berkas punya tempat tetap. Mencari gaya tombol berarti membuka folder css/, mencari gambar berarti membuka assets/ — tanpa menebak-nebak di beberapa lokasi.

Memecah CSS Menjadi Beberapa Berkas #

Suatu saat styles.css memanjang hingga ratusan baris, dan mencari satu aturan terasa seperti mencari jarum. Saat itulah kita memecahnya berdasarkan tanggung jawab:

styles.css — gaya dasar: pengaturan awal, body, tipografi
layout.css — tata letak besar: header, footer, pembagian kolom
komponen.css — komponen kecil yang dipakai berulang: kartu, tombol, badge

Semua berkas tetap dihubungkan lewat <link>, satu baris untuk tiap berkas:

html
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/komponen.css">

Urutan baris <link> ini penting. Browser memproses berkas dari atas ke bawah; bila dua berkas mengatur property yang sama untuk elemen yang sama, nilai dari berkas yang ditulis lebih akhir menang. Aturan praktisnya: berkas gaya dasar diletakkan paling atas, lalu berkas yang makin spesifik mengikuti di bawahnya.

Demo berikut mensimulasikan dua berkas CSS dengan dua blok <style> — blok pertama mewakili styles.css dan blok kedua mewakili komponen.css yang dimuat setelahnya:

Penimpaan terjadi per property, bukan per aturan: blok kedua tidak mengatur border, sehingga nilai dari blok pertama tetap berlaku. Mekanisme lengkapnya bernama cascade dan akan kita bedah tuntas pada section tersendiri; untuk sekarang, cukup pegang prinsip urutan ini.

Kapan Satu Berkas Sudah Cukup #

Jangan tergoda memecah berkas terlalu dini. Selama styles.css masih berukuran wajar dan mudah dicari, satu berkas justru lebih praktis: satu permintaan jaringan, satu tempat mencari. Pecahlah ketika dua tanda ini muncul:

Mencari aturan tertentu di dalam berkas terasa lambat.
Proyek sudah punya bagian-bagian yang jelas terpisah, misalnya halaman katalog dengan gaya khusus yang tidak dipakai halaman lain.

Kesalahan Umum dalam Menata Folder #

Tiga keliru yang paling sering muncul saat proyek mulai berkembang:

Kesalahan	Akibat	Perbaikan
Memindahkan berkas CSS tanpa memperbarui href	Gaya tiba-tiba tidak berlaku; Network menampilkan 404	Perbarui seluruh rujukan `<link>` setiap memindahkan berkas
Folder bersarang seperti `css/css/`	Path memanjang dan mudah tertukar	Satu folder `css/` di akar proyek sudah cukup
Gambar dan ikon disimpan di dalam `css/`	Folder gaya tercampur dengan aset	Pindahkan gambar ke `assets/` sesuai tugas foldernya

Kesalahan pertama adalah yang paling sering: berkas dipindahkan agar rapi, tetapi satu halaman lupa diperbarui rujukannya. Kebiasaan memeriksa tab Network setelah memindahkan berkas — sebagaimana dipraktikkan pada chapter sebelumnya — membuat masalah ini terdeteksi dalam hitungan detik.

Ringkasan #

Proyek yang sehat memisahkan css/, js/, assets/, dan halaman/ sejak awal, dengan setiap berkas CSS memikul satu tanggung jawab. Urutan <link> menentukan hasil akhir saat dua berkas mengatur property yang sama: berkas terakhir menimpa yang terdahulu, per property. Dengan fondasi lingkungan yang kini lengkap, chapter berikutnya membawa kita masuk ke alur kerja debugging di DevTools.