Semua kebiasaan sebelumnya bermuara ke satu pertanyaan: apakah markup kita siap distyle? CSS dan HTML bekerja seperti pasangan — CSS menyasar elemen lewat selector, dan selector hanya bisa menyasar apa yang HTML sediakan: nama elemen, class, atau id. Markup yang tidak menyediakan hook yang tepat memaksa CSS menulis selector rapuh atau, lebih buruk, memaksa HTML ditambal ulang di tengah penataan.

Chapter penutup ini merangkum kebiasaan menyiapkan hook: struktur logis dengan elemen semantik, class yang bermakna, cukup tanpa berlebihan, dan pembagian tugas yang jelas antara class dan id.

Struktur Logis Menjadi Hook #

Aturannya: rancang markup mengikuti struktur makna, bukan penampilan — elemen semantik yang sudah kita biasakan otomatis menjadi hook CSS yang stabil. Mekanismenya: selector bisa menyasar nama elemen langsung. nav a menata semua tautan di dalam nav tanpa satu class pun, dan aturan itu tetap bekerja saat isi menu bertambah.

Berikut pasangan markup dan CSS dari navigasi Kedai Kopi Siti:

html 
<nav class="nav-utama">
  <ul>
    <li><a href="index.html">Beranda</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="kontak.html">Kontak</a></li>
  </ul>
</nav>
css 
.nav-utama ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

Mari kita bedah hubungannya:

  1. class="nav-utama" (baris 1): satu class di elemen teratas — cukup untuk membedakan nav utama dari nav lain, misalnya nav footer.
  2. ul, li, a tanpa class (baris 2-7): tidak satu pun butuh class, karena selector turunan .nav-utama ul sudah menyasar mereka lewat posisi di dalam pohon.
  3. Selector .nav-utama ul (CSS baris 1-2): hanya menyasar ul yang berada di dalam .nav-utama — daftar di bagian lain halaman tidak terpengaruh.
  4. display: flex; gap: 1rem (CSS baris 3-5): menata ketiga item sejajar; menu bertambah item keempat, kelima — CSS tidak berubah sama sekali.

Hook yang cukup terbukti begitu CSS ditambahkan. Demo berikut memakai markup dan aturan CSS persis seperti dua blok di atas:

Tautan pada demo menunjuk berkas yang tidak tersedia di dalam bingkai — bila diklik, bingkai akan berpindah ke halaman kosong dan perlu memuat ulang halaman ini; yang dibuktikan di sini adalah tata letak dari hook CSS-nya.

Tiga tautan langsung sejajar tanpa penanda butir — satu selector turunan bekerja tanpa satu class pun pada li maupun a. Itulah bukti markup yang siap distyle: begitu desain menuju navigasi horizontal, tidak ada satu baris markup pun yang perlu ditambal.

Inilah arti “cukup hook”: class di titik-titik strategis, sisanya disasar lewat posisi. Menambah class di setiap elemen (classitis, chapter sebelumnya) justru membuat CSS penuh selector satu-guna.

Class Bermakna, Bukan Penampilan #

Class paling awet menamai peran konten: kartu-produk, nav-utama, daftar-menu. Anti-polanya adalah class penampilan seperti biru-merah atau margin-bawah-16 — begitu desain berganti, nama itu berbohong (kartu biru-merah yang sekarang hijau). Penampilan memang urusan CSS; class cukup menjawab “ini kelompok apa”.

Satu kebiasaan penutup yang bersinggungan: hindari style="" untuk penataan langsung di elemen. Atribut global style sah secara sintaks — kita bahas di chapter Global Attributes — tetapi gaya menempel permanen pada satu elemen, tidak bisa dipakai ulang, dan tidak tersentuh media query.

id untuk JavaScript dan Anchor #

Bagi tugas dengan tegas: class untuk CSS dan pengelompokan; id untuk sasaran unik — anchor lompatan (chapter Link ke Bagian Halaman) dan elemen yang disasar JavaScript. id harus unik per halaman, jadi menatanya lewat CSS (#kontak-form) berarti aturan itu tak bisa dipakai ulang di mana pun — persis kebalikan tujuan stylesheet.

Ringkasan #

  • Struktur semantik adalah hook CSS paling stabil: selector turunan seperti nav a menata banyak elemen tanpa satu class.
  • Class menamai peran (kartu-produk) bukan penampilan (biru-merah); hindari style="" untuk penataan permanen.
  • id untuk sasaran unik — anchor dan JavaScript — bukan untuk styling.
  • Rancang pohon dulu, class kemudian; konvensi BEM menyusul saat tim membesar.

Section berikutnya memakai seluruh bekal ini: proyek-proyek nyata yang membangun website utuh dari nol, sebelum Course ditutup dengan daftar sumber belajar lanjutan.