Selector Best Practices

Selector yang bekerja hari ini belum tentu selamat dari perubahan HTML minggu depan. Ketika sebuah aturan menunjuk elemen melalui rantai panjang seperti .menu ul li a span, perubahan kecil pada struktur dokumen langsung memutus styling tersebut. Chapter ini merangkum kebiasaan menulis selector yang menjaga CSS tetap tahan perubahan: memilih sasaran yang stabil, menahan specificity tetap rendah, dan mengutamakan keterbacaan.

Pilih Sasaran yang Stabil #

Aturan yang baik menunjuk elemen berdasarkan perannya, bukan berdasarkan posisinya di pohon dokumen. Class dan attribute yang bermakna jauh lebih stabil daripada kedalaman nesting, karena pengembang umumnya mempertahankan nama class meskipun struktur HTML direstrukturisasi.

/* Rapuh: bergantung pada urutan dan kedalaman elemen */
div > div > ul li:nth-child(2) a {
  color: rgb(2, 132, 199);
}

/* Tangguh: bergantung pada makna yang dinyatakan HTML */
.link-utama {
  color: rgb(2, 132, 199);
}

Kedua aturan di atas menghasilkan tampilan yang sama, tetapi keduanya tidak sama kuat dan tidak sama awet. Selector .link-utama memiliki specificity 0, 1, 0 dan tetap berlaku meskipun tautan dipindah ke elemen lain. Selector rantai panjang memiliki specificity 0, 1, 4 dan berhenti bekerja begitu satu lapis div dihapus.

Tahan Specificity Tetap Rendah #

Specificity rendah bukan sekadar gaya penulisan, melainkan ruang gerak untuk masa depan. Aturan dengan specificity 0, 1, 0 mudah ditimpa oleh satu class khusus seperti .aktif atau .error tanpa perlu menaikkan specificity aturan lain.

/* Satu class cukup menunjuk komponen */
.tombol {
  background-color: rgb(37, 99, 235);
  color: rgb(255, 255, 255);
}

/* Varian menimpa dengan specificity setara */
.tombol.aktif {
  background-color: rgb(29, 78, 216);
}

Kebiasaan yang perlu dijaga:

• Satu class untuk satu komponen: hindari menggabungkan type selector dengan class seperti button.tombol kecuali memang perlu membedakan dari elemen lain.
• Jangan menaikkan specificity untuk memenangkan perebutan urutan: jika dua aturan berebut, turunkan specificity yang salah, bukan menaikkan yang benar.
• Hindari !important sebagai perbaikan cepat: !important menutup jalur penimpaan yang wajar dan memaksa aturan lain memakainya juga; gunakan hanya sebagai pintu keluar terakhir pada utility class.
• Simpan ID untuk JavaScript dan anchor: ID memiliki specificity 1, 0, 0 yang sulit ditimpa; styling komponen sehari-hari cukup memakai class.

Tulis Selector yang Terbaca #

Keterbacaan selector menentukan kecepatan tim memahami stylesheet. Selector pendek dengan nama bermakna dapat dipahami sekali lalu; selector panjang menuntut pembacaan ulang setiap kali muncul.

Nama class sebaiknya menggambarkan peran komponen, bukan nilai visual saat ini. Class .teks-merah-kecil menjadi menyesatkan begitu teks yang sama diubah menjadi hijau dan besar, sedangkan .peringatan tetap akurat di kondisi apa pun. Konvensi penamaan yang lebih sistematis seperti BEM kita bahas pada Chapter BEM di bagian arsitektur.

Rangkum dalam Kebiasaan Harian #

Ketika menulis aturan baru, jalankan pertanyaan singkat ini sebelum menyimpan file:

1. Apakah selector ini menunjuk peran elemen, bukan posisi elemen di dokumen?
2. Berapa specificity aturan ini — bisakah aturan lain menimpanya dengan satu class saja?
3. Apakah aturan ini akan tetap bekerja bila struktur HTML di sekelilingnya berubah?
4. Apakah nama class masih benar jika gaya visualnya berubah total?

Pertanyaan-pertanyaan tersebut mengarahkan keputusan ke pola yang sama: class bermakna, specificity serendah mungkin, dan ketergantungan minimal pada struktur. Dengan fondasi ini, keempat bab cascade pada section berikutnya — dimulai dari Cascade Origins — akan terasa lebih mudah karena kita sudah terbiasa menjaga specificity tetap terkendali.