Cara Menyusun Folder Asset Website Biar Gak Berantakan
Pernah gak sih, pas lagi ngerjain project website, kamu buka folder project terus lihat isinya campur aduk? File HTML, gambar, CSS, JavaScript—semua numpuk di satu folder. Rasanya pengen tutup laptop aja, kan?
Tenang, kamu gak sendirian. Banyak developer pemula—dan bahkan yang udah agak mahir—sering abai sama struktur folder. Padahal, urusan yang satu ini kecil tapi dampaknya gede banget. Mulai dari loading website yang lebih cepat, tim kerja yang gak saling lempar salah, sampai diri kamu sendiri yang bakal berterima kasih 3 bulan kemudian pas diminta revisi.
Nah, di artikel ini, kita bakal bahas cara menyusun folder asset yang simpel, rapi, dan bikin hidup lebih mudah. Santai aja, gak perlu ribet.
Kenapa Sih Struktur Folder Itu Penting?
Oke, oke, sebelum kita masuk ke cara-caranya, gue kasih gambaran dulu kenapa ini penting. Bukan cuma soal “biar keliatan pro”, tapi lebih ke:
1. Mudah dicari – Mau ganti gambar logo? Tinggal buka folder `images`. Mau ngubah warna tombol? Cek folder `css`. Gak perlu pusing nyari-nyari.
2. Loading lebih cepat – Kalau file tercampur, browser kadang bingung. Dengan struktur yang jelas, kita juga bisa kasih tahu browser prioritas loading-nya.
3. Kolaborasi lancar – Kerja tim? Developer lain bakal langsung paham mana file yang harus diedit tanpa nanya-nanya mulu.
4. Hemat waktu di masa depan – Percaya deh, 6 bulan ke depan kamu bakal lupa struktur yang sekarang. Kalau rapi, tinggal buka-buka, langsung inget.
Struktur Dasar yang Recommended
Ada banyak gaya struktur folder, tapi yang paling umum dan gampang diingat kira-kira begini:
“`
root/
├── index.html
├── about.html
├── css/
│ ├── style.css
│ └── responsive.css
├── js/
│ └── script.js
├── images/
│ ├── logo.png
│ └── hero-bg.jpg
├── fonts/
│ └── custom-font.woff2
└── assets/
└── icons/
└── icon-facebook.svg
“`
Mari kita bedah satu per satu.
1. Folder `css/`
Ini tempat buat semua file CSS. Kalau cuma satu file, bisa langsung simpen `style.css` di sini. Tapi kalau websitenya udah gede, mending pisah-pisah. Contohnya:
– `style.css` – buat style utama.
– `responsive.css` – khusus media queries.
– `components.css` – buat komponen-komponen (button, card, dll).
Jangan lupa, hindari nama file yang ambigu kayak `style1.css`, `style2.css`, apalagi `style_final_fix_2.css`. Please, jangan.
2. Folder `js/`
Ini buat file JavaScript. Sama kayak CSS, bisa dipisah sesuai fungsi:
– `main.js` – script utama.
– `vendor.js` – library pihak ketiga yang udah dimodifikasi.
– `modules/` – kalau kamu pake modular JS (misal React, Vue, atau vanilla ES6 modules), bikin subfolder aja.
3. Folder `images/`
Semua gambar statis kayak logo, icon, background, ditaruh di sini. Tapi hati-hati, jangan asal kumpul. Kalau udah banyak, bikin subfolder:
– `images/logo/`
– `images/icons/`
– `images/backgrounds/`
– `images/blog/` – buat gambar postingan blog.
Ini bikin kamu gak perlu scroll 100 file gambar buat nyari yang satu.
4. Folder `fonts/`
Kalau kamu pake font custom (bukan Google Fonts yang di-load dari CDN), simpen di sini. Format yang umum: `.woff2`, `.woff`, `.ttf`. Jangan lupa link dengan `@font-face` di CSS.
5. Folder `assets/` (Opsional)
Beberapa orang suka ngebedain “asset” utama dengan “asset pendukung”. Misalnya, icon SVG kecil-kecil, file JSON data, atau dokumen. Kamu bisa bikin folder `assets/` lalu di dalamnya ada subfolder `icons/`, `data/`, `docs/`.
Tapi ingat, ini opsional. Kalau websitenya kecil, cukup pakai `images/` aja udah cukup.
Tips Tambahan Biar Makin Rapi
1. Gunakan Nama yang Konsisten
Pilih satu gaya penamaan: camelCase, snake_case, atau kebab-case. Yang paling umum di web development adalah kebab-case (contoh: `hero-banner.jpg`, `main-style.css`). Jangan campur aduk.
2. Jangan Simpan File yang Gak Dipakai
Pernah nemuin file `logo-old.png` atau `test-style.css`? Hapus aja. File sampah cuma bikin bingung dan memperbesar ukuran folder.
3. Kelola Versi dengan Git
Kalau pake Git, jangan lupa bikin `.gitignore` biar folder kayak `node_modules` atau file sementara gak ikut terupload. Ini juga bikin struktur folder tetap bersih di repo.
4. Gunakan Prefix untuk File Spesifik
Misalnya, buat halaman tertentu, kasih prefix seperti `home-hero.jpg`, `about-team.jpg`. Ini membantu nyari file berdasarkan halaman.
5. Pertimbangkan Build Tools
Kalau kamu udah pake bundler kayak Webpack atau Vite, strukturnya bisa sedikit berbeda. Tapi prinsip dasarnya tetap sama: pisah-pisah, jangan campur aduk.
Contoh Praktis: Project Website Restoran
Biar lebih kebayang, ini contoh struktur sederhana untuk website restoran fiktif “Warung Bahari”.
“`
warung-bahari/
├── index.html
├── menu.html
├── about.html
├── css/
│ ├── style.css
│ ├── menu.css
│ └── responsive.css
├── js/
│ ├── main.js
│ └── menu-filter.js
├── images/
│ ├── logo.png
│ ├── hero-banner.jpg
│ ├── menu/
│ │ ├── nasi-goreng.jpg
│ │ └── sate-ayam.jpg
│ └── gallery/
│ ├── interior1.jpg
│ └── interior2.jpg
├── fonts/
│ └── playfair-display.woff2
└── assets/
└── icons/
├── instagram.svg
└── whatsapp.svg
“`
Rapi, kan? Tinggal buka, langsung paham mana yang mana.
Penutup
Menyusun folder asset website itu kayak merapikan meja kerja. Awalnya mungkin males, tapi begitu udah rapi dan terbiasa, kamu bakal betah. Gak cuma bikin coding lebih efisien, tapi juga mengurangi stress pas debugging atau revisi.
Mulai aja dari sekarang. Ambil project lamamu, lihat folder asset-nya. Kalau berantakan, susun ulang sesuai tips di atas. Dijamin, besok-besok pas buka lagi, kamu bakal ngomong, “Syukurlah, dulu gue sempet ngerapiin ini.”
Selamat mencoba, dan semoga folder asset webmu selalu rapi dan bahagia! 😊