Semua contoh kita sejauh ini ramping: satu elemen untuk satu tugas. Di proyek nyata, markup punya kecenderungan menumpuk — setiap revisi menambah satu div pembungkus “untuk berjaga-jaga”, dan setiap penataan baru menambah class. Dua kebiasaan berlebihan ini begitu umum sampai punya nama: divitis (menghamburkan div) dan classitis (menghamburkan class).

Chapter ini melatih mata mengenali keduanya, lalu melatih tangan mereduksinya. Prinsip kerjanya: markup minimal berarti memilih elemen paling sedikit yang tetap membawa makna yang dibutuhkan.

Mengenali Tanda Berlebihan #

Divitis paling gampang dikenali dari pembungkus yang tidak melakukan apa pun: div yang tidak punya gaya, tidak jadi hook JavaScript, dan tidak mengelompokkan apa pun secara bermakna. Sementara itu, classitis muncul sebagai class berlapis untuk satu elemen tunggal — misalnya class="box box-inner box-inner-kiri" — atau class unik yang dipakai tepat sekali lalu dilupakan.

Daftar periksa singkatnya:

  1. Pembungkus tanpa gaya dan tanpa fungsi — kandidat kuat untuk dihapus.
  2. Class bertumpuk pada satu elemen hanya untuk variasi kecil penampilan.
  3. Class unik sekali pakai — biasanya satu di antaranya cukup, atau tidak sama sekali.
  4. Elemen blok yang hanya membungkus satu anak tunggal tanpa alasan.

Contoh Sebelum dan Sesudah #

Berikut kartu menu milik Kedai Kopi Siti versi menumpuk:

html 
<div class="kartu">
  <div class="kartu-pembungkus">
    <div class="kartu-isi">
      <div class="kartu-judul">Kopi Susu Gula Aren</div>
      <div class="kartu-teks">Espresso, susu segar, gula aren.</div>
      <div class="kartu-harga">Rp 22.000</div>
    </div>
  </div>
</div>

Dan berikut versi reduksinya:

html 
<article class="kartu">
  <h3>Kopi Susu Gula Aren</h3>
  <p>Espresso, susu segar, gula aren.</p>
  <p><strong>Rp 22.000</strong></p>
</article>

Hasil render: sama-sama menampilkan judul, satu baris deskripsi, dan harga. Mari kita bedah versi ramping baris-per-baris:

  1. <article class="kartu"> (baris 1): satu class untuk satu tugas — menandai kartu sebagai unit styling; article menyatakan makna “item menu yang mandiri” sekaligus.
  2. <h3> (baris 2): judul menu memang heading; div.kartu-judul tidak menambah apa pun selain keharusan menata manual.
  3. <p> (baris 3): deskripsi adalah paragraf biasa — elemen paling tepat, tanpa class.
  4. <p><strong> (baris 4): harga ditebalkan lewat strong; jika nanti gaya harga berubah, CSS bisa menyasar .kartu p strong tanpa menyentuh markup.

Biaya markup berlebihan tidak terlihat di layar — kedua versi menghasilkan kartu yang persis sama. Bukti visualnya:

Kedua kartu sengaja diberi aturan CSS yang sama agar bisa dibandingkan titik demi titik — tanpa CSS sama sekali, versi ramping masih menyerupai kartu berkat tipografi bawaan h3, p, dan strong, sementara versi menumpuk tampil sebagai teks polos tanpa satu pun penanda.

Kedua kartu di atas tidak dapat dibedakan: judul, deskripsi, dan harga tampil dengan bentuk yang sama persis — dan justru di situlah letak biayanya. Versi ramping cukup memakai makna elemennya sebagai hook CSS; versi menumpuk harus meniru tipografi itu satu per satu lewat class kartu-judul, kartu-teks, dan kartu-harga, di atas pembungkus dua lapis yang tidak melakukan apa pun. Berkas membengkak, DOM membangun simpul lebih banyak, dan pembaca kode harus menelusuri tiga tingkat indentasi sebelum menemukan isi kartunya.

Yang dihapus bukan sekadar enam baris: tiga div pembungkus, satu class bertingkat, dan tiga class peniru elemen. Setiap penamaan ganda (kartu-pembungkus di dalam kartu) juga hilang — sumber kebingungan klasik saat membaca stylesheet.

Ringkasan #

  • Divitis: div pembungkus tanpa gaya/fungsi; classitis: class berlapis dan sekali pakai di semua elemen.
  • Reduksi bekerja dengan mengembalikan tugas ke elemen aslinya — heading ke h3, paragraf ke p, item mandiri ke article.
  • Uji cepat: hapus elemen atau class itu — kalau tidak ada yang berubah dan tidak ada makna yang hilang, ia memang berlebih.

Setelah ramping, mari pastikan yang tersisa tersusun rapi — bab berikutnya membahas pemformatan yang mudah dibaca.