Memilih Selector yang Tepat

Sampai di sini seluruh peralatan selector sudah ada di tangan kita: element, class, id, attribute, combinator, compound, hingga selector list. Peralatan yang lengkap tidak otomatis menghasilkan stylesheet yang baik, karena pertanyaan yang sesungguhnya bukan “apa saja yang bisa dipilih”, melainkan “mana yang paling tepat dipilih”. Chapter penutup section ini merangkum cara mengambil keputusan tersebut: peta situasi beserta selector yang disarankan, tiga prinsip penulisan yang menjaga stylesheet tetap mudah dirawat, dan satu demo yang menerapkan semuanya pada markup kecil.

Peta Keputusan: Situasi dan Selector yang Disarankan #

Tabel ini bukan aturan baku, melainkan titik mulai. Keputusan terakhir selalu kembali pada satu pertanyaan: selector mana yang tetap benar ketika markup dan desain berkembang.

Prinsip 1: Beri Nama Berdasarkan Maksud #

Class sebaiknya menjawab “untuk apa elemen ini”, bukan “elemen ini tampak seperti apa”. Bandingkan .tombol-merah dengan .tombol-beli: begitu desain berganti warna menjadi hijau, nama pertama tidak lagi menggambarkan kenyataan dan setiap pemakaian lama menjadi menyesatkan. Nama berbasis maksud seperti .tombol-beli, .kartu-langganan, atau .menu-utama tetap benar sekalipun tampilannya dirombak total.

Prinsip 2: Pilih Specificity Serendah yang Tetap Bekerja #

Semakin tinggi specificity sebuah rule, semakin berat upaya menimpanya kelak. Karena itu mulailah dari selector paling ringan yang masih menjawab kebutuhan: element dan class, lalu naikkan ke jalur combinator atau id hanya bila memang diperlukan. Stylesheet yang seluruh rule-nya ringan mudah ditimpa secara terkendali; stylesheet yang penuh selector berat memaksa setiap perubahan mengikuti tumpukan yang sama. Section Cascade, Inheritance, dan Specificity akan memberikan hitungan pastinya.

Prinsip 3: Hindari Selector yang Terlalu Detail #

Selector yang menyebut banyak bagian padahal sebagian tidak diperlukan disebut over-qualified. Masalahnya dua arah: specificity membengkak tanpa manfaat, dan selector menjadi rapuh karena menyandarkan diri pada struktur yang mungkin berubah:

/* jalur panjang: specificity tinggi dan rapuh saat markup berubah */
ul.nav-list li a {
  padding: 8px 12px;
}

/* jalur pendek: hasil sama untuk markup yang stabil */
.nav-list a {
  padding: 8px 12px;
}

Bila nanti submenu bersarang masuk dan gaya harus dibatasi pada level pertama, jalan tengahnya adalah .nav-list > li > a — combinator child dari chapter sebelumnya. Intinya: tempelkan anchor selector pada bagian markup yang paling stabil, lalu berhenti di situ.

Prinsip 4: Konsisten dalam Satu Proyek #

Keputusan kecil yang didokumentasikan menghemat banyak perdebatan: penamaan kebab-case, id hanya untuk JavaScript, kedalaman maksimal jalur selector, dan kapan class status boleh beranting dengan class dasar. Konsistensi membuat stylesheet yang ditulis banyak orang tetap terdengar satu suara, dan pembaca baru dapat menebak pola penulisannya dengan benar.

Studi Kasus: Satu Markup, Keputusan yang Rapi #

Markup kartu langganan berikut akan kita tata dengan selector yang dipilih secara sadar:

<section class="kartu-langganan">
  <h2>Buletin Mingguan</h2>
  <p class="deskripsi">Satu email setiap Senin berisi rangkuman tutorial terbaru.</p>
  <form>
    <div>
      <label for="email-langganan">Alamat email</label>
    </div>
    <div>
      <input type="email" id="email-langganan">
    </div>
    <div>
      <button type="button" class="tombol-daftar">Daftar sekarang</button>
    </div>
  </form>
  <p class="catatan">Kami tidak membagikan alamat email Anda.</p>
</section>

Setiap rule di bawah ini memakai jenis selector berbeda, dan komentarnya mencatat alasan pemilihannya:

/* class: komponen yang dapat dipakai ulang di halaman mana pun */
.kartu-langganan {
  border: 1px solid #d9d2c0;
  border-radius: 12px;
  padding: 16px 20px;
}

/* child combinator: hanya judul yang menjadi anak langsung kartu */
.kartu-langganan > h2 {
  margin-top: 0;
  color: #14503a;
}

/* attribute selector: informasi "input email" sudah ada di markup */
input[type="email"] {
  padding: 8px 10px;
  border: 1px solid #c9c2b2;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* class bernama maksud, bukan tampilan */
.tombol-daftar {
  background-color: #14503a;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
}

/* adjacent sibling: hanya catatan yang persis mengikuti form */
form + .catatan {
  font-size: 13px;
  color: #5a6b7b;
}

Tidak ada rule yang menyebut jalur dalam; setiap selector menempel pada informasi yang memang sudah ada di markup.

Mari kita nilai keputusannya satu per satu:

1. .kartu-langganan: class, karena komponen ini bisa dipindah ke halaman lain; namanya menyatakan maksud, bukan tampilan.
2. .kartu-langganan > h2: child combinator, sehingga judul milik komponen lain yang suatu saat bersarang di dalam kartu tidak ikut tertata.
3. input[type="email"]: attribute selector, karena markup sudah menyatakan tipenya — menambah class akan mengulang informasi yang sama.
4. .tombol-daftar: nama berbasis maksud; warna tombol boleh berubah berkali-kali tanpa satu pun penulisan ulang.
5. form + .catatan: adjacent sibling, sehingga hanya catatan yang persis mengikuti form yang tampil kecil — bila catatan lain ditambah di tempat lain, gaya ini tidak menyebar.

Ringkasan #

Memilih selector adalah soal kesesuaian: element untuk gaya dasar, class untuk komponen, id untuk target unik, attribute untuk informasi bawaan markup, dan combinator untuk hubungan yang stabil. Tiga kebiasaan yang menjaga stylesheet tetap sehat adalah penamaan berbasis maksud, specificity serendah yang tetap bekerja, dan jalur selector yang sesingkat mungkin. Sampai di sini section Selectors tuntas; selanjutnya kita masuk ke section Cascade, Inheritance, dan Specificity untuk memahami bagaimana browser menentukan pemenang ketika beberapa aturan menyasar elemen yang sama.