Belajar CSS - Praktik Penulisan CSS yang Bersih dan Modular

#Pendahuluan

Stylesheet berawal dari puluhan baris yang mudah dipahami, lalu tumbuh menjadi ribuan baris yang saling menimpa. Tanpa disiplin, setiap penambahan fitur baru menambah hutang teknis. Episode 19 membahas praktik penulisan CSS agar kode tetap terbaca, modular, dan mudah dirawat. Kebersihan bukan soal estetika semata — CSS yang rapi membuat bug mudah dilacak, perubahan cepat diuji, dan kolaborasi tim lebih lancar. Modul yang terpisah memungkinkan tim bekerja di area berbeda tanpa tabrakan. Mengapa penting? Hampir semua proyek berakhir pada fase pemeliharaan yang lebih panjang daripada fase pengembangan. Kualitas kode hari ini menentukan seberapa cepat kalian bisa mengubahnya bulan depan.

#Konsistensi dan Penamaan

Penamaan yang konsisten adalah fondasi CSS bersih. Pilih satu konvensi dan patuhi:

naming.css

.card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.card-title {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.btn {
  padding: 10px 16px;
  border-radius: 6px;
}
.btn-primary {
  background-color: #2563eb;
  color: white;
}

Nama menjelaskan fungsi, bukan tampilan. card-title lebih baik daripada text-blue-large karena tetap masuk akal saat gaya berubah. Gunakan kebab-case untuk semua nama kelas, dan hindari singkatan yang hanya dimengerti penulisnya.

#Spesifisitas yang Terkontrol

Spesifisitas tinggi membuat CSS sulit ditimpa dan mendorong penggunaan !important:

specificity.css

.kartu .tombol .label {
  color: blue;
}
.kartu .label {
  color: red;
}

Selector id, nesting dalam, dan rantai class panjang menaikkan spesifisitas. Aturan praktis: pertahankan spesifisitas serendah mungkin — satu class per aturan sudah cukup — agar timpaan mudah dilakukan dengan selector yang sama panjang.

specificity-lain.css

[data-state="open"] .panel {
  visibility: visible;
}
.panel[data-state="open"] {
  visibility: visible;
}

Gunakan class dan atribut data-* untuk state dibanding selector elemen dalam yang panjang. Ini menjaga spesifisitas tetap datar dan state komponen mudah dibaca.

#Memecah Menjadi Modul

Bagi stylesheet besar menjadi file per bagian:

import.css

@import url("reset.css");
@import url("base.css");
@import url("components.css");
@import url("layout.css");
@import url("utilities.css");

Struktur umum meliputi reset, style dasar, komponen, layout, dan utilitas. Saat memakai build tool seperti PostCSS atau bundler, impor dilakukan di source sehingga hanya satu file yang dikirim ke browser.

components.css

.card { /* ... */ }
.card-title { /* ... */ }
.btn { /* ... */ }
.btn-primary { /* ... */ }

Kelompokkan aturan yang berhubungan dan beri komentar penanda bagian. Komponen yang berdiri sendiri — kartu, tombol, navbar — lebih mudah dicari, diuji, dan dipakai ulang.

#Komentar yang Menjelaskan Alasan

Komentar terbaik menjelaskan mengapa, bukan apa yang sudah jelas:

komentar.css

/* margin sengaja negatif untuk menutup jarak
   kartu dengan header pada tampilan mobile */
.card {
  margin-top: -24px;
}
/* Fallback untuk browser lama yang belum
   mendukung gap pada flexbox */
.card {
  margin-bottom: 16px;
}

Hindari komentar yang mengulang nama properti. Tulis konteks, nilai yang dipakai, dan alasan di balik keputusan yang tidak biasa — informasi yang hilang paling cepat saat proyek berganti tangan.

#Alat Bantu Kualitas

Alat otomatis menjaga konsistensi tanpa perdebatan manual:

bun add -d prettier stylelint
npx stylelint "**/*.css" --fix
npx prettier "**/*.css" --write

stylelint memeriksa kesalahan dan aturan gaya, sementara prettier merapikan format. Konfigurasi keduanya disimpan di file proyek, sehingga semua anggota tim menghasilkan format yang identik. Jalankan keduanya dalam pipeline commit agar kode buruk tidak lolos.

npx stylelint "src/**/*.css"

Pada proyek dengan continuous integration, jalankan lint sebagai langkah pipeline. Gagalkan build bila aturan dilanggar — ini memindahkan penegakan kualitas dari diskusi menjadi mekanik.

#Latihan: Merapikan Stylesheet

Sebelum:

css/kotor.css

#header .nav a {
  color: #2563eb;
  text-decoration: none;
}
#header .nav a:hover {
  color: red;
}

Sesudah:

css/bersih.css

.nav-link {
  color: #2563eb;
  text-decoration: none;
}
.nav-link:hover {
  color: #dc2626;
}
.nav-link:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

Perhatikan perubahannya: id diganti class, warna hex mentah diganti nilai yang lebih spesifik, dan state fokus ditambahkan. Buka file di editor, lalu jalankan npx stylelint "css/*.css" --fix untuk melihat saran otomatis yang bisa diterapkan.

#Kesalahan Umum dan Solusinya

#Spesifisitas Eskalasi

Rantai selector panjang memaksa selector berikutnya lebih panjang lagi. Hentikan siklus dengan :where() yang berspesifisitas nol atau dengan meratakan selector.

#Menyalin Kode dari Forum

Cuplikan dari internet sering memakai !important dan id. Adaptasi menjadi class sebelum dipakai agar tidak menyandera proyek.

#Komentar Kedaluwarsa

Komentar yang salah menyesatkan lebih parah daripada tanpa komentar. Perbarui komentar setiap kali kode berubah, atau hapus bila tidak lagi relevan.

#Penutup

Inti yang harus dibawa pulang:

• Nama kelas harus menjelaskan fungsi, bukan tampilan.
• Jaga spesifisitas serendah mungkin agar mudah ditimpa.
• Pecah stylesheet menjadi modul dan file yang terpisah.
• Tulis komentar yang menjelaskan alasan, bukan yang mengulang properti.
• Gunakan stylelint dan prettier untuk konsistensi otomatis.
• Lint berjalan di CI agar kualitas dijaga secara mekanis. Di episode 20 selanjutnya kita akan membahas arsitektur CSS: BEM, OOCSS, dan utility-first — membandingkan pendekatan penataan kode untuk skala proyek yang berbeda.