Praktik Terbaik: Reset, Penamaan, & Struktur CSS
Menulis CSS yang rapi dan mudah dirawat: reset dasar, penamaan class dengan BEM, urutan penulisan, menghindari kesalahan umum, dan memakai DevTools untuk debugging.
CSS gampang ditulis, sulit dirawat
CSS yang berantakan membuat setiap perubahan kecil berisiko merusak tempat lain. Kebiasaan-kebiasaan berikut membuat proyekmu tetap sehat saat tumbuh besar.
1. Mulai dengan reset sederhana
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }2. Penamaan class yang konsisten: BEM
BEM (Block, Element, Modifier) adalah aturan penamaan yang populer dan mudah dipahami:
| Bagian | Format | Contoh |
|---|---|---|
| Block (komponen utama) | .nama | .kartu |
| Element (bagian di dalam block) | .blok__elemen | .kartu__judul, .kartu__isi |
| Modifier (variasi) | .blok--variasi | .kartu--aktif, .tombol--besar |
<article class="kartu kartu--aktif">
<h3 class="kartu__judul">Judul</h3>
<p class="kartu__isi">Isi...</p>
</article>Keuntungannya: specificity selalu rendah (hanya satu class), nama menjelaskan hubungan, dan komponen mudah dipindah.
3. Gunakan class, bukan tag atau ID, untuk styling
- Selector tag (
div p span) rapuh: berubah bila struktur HTML berubah. - ID memiliki specificity tinggi sehingga sulit ditimpa.
- Class yang pendek dan spesifik adalah titik tengah terbaik.
4. Hindari kesalahan umum
| Jangan | Lakukan |
|---|---|
!important di mana-mana | Perbaiki specificity atau urutan |
| Menyalin blok CSS yang sama berulang | Satukan dengan class umum atau variabel |
Ukuran tinggi tetap untuk teks (height: 200px) | Biarkan tinggi mengikuti isi (min-height) |
| Warna hard-coded di 40 tempat | Variabel CSS |
| Menghapus outline tanpa pengganti | Ganti dengan gaya fokus yang jelas |
5. Susun berkas dengan urutan logis
- Variabel (
:root) dan reset. - Gaya dasar elemen (
body,h1,a). - Layout (container, grid).
- Komponen (tombol, kartu, navbar).
- Utilitas dan media query.
Beri komentar bagian: /* ===== Tombol ===== */. Proyek besar dipecah menjadi beberapa berkas.
6. Debugging dengan DevTools
Klik kanan elemen → Inspect. Di sana kamu bisa: melihat aturan mana yang berlaku dan mana yang dicoret, mengubah nilai langsung untuk bereksperimen, melihat diagram box model, dan menguji tampilan ponsel. Sebelum "menebak-nebak", selalu Inspect dulu.
Sumber belajar lanjutan yang sangat baik: MDN Web Docs (developer.mozilla.org) sebagai kamus lengkap dan caniuse.com untuk mengecek dukungan browser.