Kita telah mengetahui bahwa parser CSS bersifat toleran: deklarasi yang salah dilewati tanpa pesan, dan halaman tetap tampil. Kemudahan itu berbayar — kesalahan bisa bertahan berhari-hari tanpa terdeteksi karena tidak ada yang membunyikan peringatan. Alat pemeriksa mengisi celah tersebut: validator memastikan kode sesuai spesifikasi, linter menjaga aturan tim, dan formatting yang konsisten membuat kesalahan cepat terlihat. Ketiganya adalah kebiasaan kecil dengan dampak besar pada mutu stylesheet.

Validasi dengan W3C CSS Validator #

CSS Validator dari W3C memeriksa stylesheet terhadap spesifikasi CSS. Cara pakainya tiga: menempelkan kode langsung, memasukkan URL halaman, atau mengunggah berkas. Hasilnya dibagi dua kategori: error berarti kode melanggar aturan sintaks atau memakai properti yang tidak dikenal, sedangkan warning bersifat informasi dan sering kali masih wajar dipertahankan.

Sebagai contoh, stylesheet dengan kesalahan yang kita bahas pada Chapter Sintaks CSS akan dilaporkan seperti ini:

text 
error  : Property "colr" doesn't exist : rgb(194, 65, 12)
         (baris 12, selector .kartu)
warning: Vendor prefix "-webkit-border-radius" sudah tidak
         diperlukan oleh browser modern

Validator menemukan kesalahan yang diam-diam dilewati browser, sehingga cocok dipakai sebagai pemeriksa akhir sebelum kode digabung. Perlu diingat sifatnya sebagai alat bantu: sebagian warning berkaitan dengan fitur modern yang memang valid, jadi keluarannya dibaca dengan niat, bukan diperlakukan sebagai vonis mutlak.

Linter dengan Stylelint #

Linter menganalisis kode secara statis — tanpa menjalankannya — untuk menangkap kesalahan dan inkonsistensi sejak masih di editor. Untuk CSS, alat yang paling banyak dipakai adalah stylelint : cukup dinyalakan, seluruh aturan bawaannya langsung menandai kode bermasalah, dan daftar aturannya dapat disesuaikan dengan kebutuhan tim.

json 
{
  "rules": {
    "property-no-unknown": true,
    "declaration-block-no-duplicate-properties": true,
    "color-no-invalid-hex": true
  }
}

Tiga aturan pada contoh di atas mewakili tiga kelompok yang paling berguna: property-no-unknown menangkap salah nama properti seperti colr, declaration-block-no-duplicate-properties menangkap deklarasi ganda yang mudah terjadi saat menggabungkan kode, dan color-no-invalid-hex menangkap nilai hex yang kurang digit. Ketika stylelint dipasang di editor, pelanggaran muncul sebagai garis bawah sebelum berkas disimpan — kesalahan tertangkap di tempat ia ditulis, bukan di browser.

Kebiasaan Formatting yang Konsisten #

Formatting tidak mengubah hasil di browser — parser CSS memperlakukan spasi dan baris baru secara longgar — tetapi mengubah kecepatan kita membaca kode. Blok yang rapat dan tak beraturan menyembunyikan deklarasi ganda serta nilai yang janggal; blok yang rapi memperlihatkannya. Kebiasaan yang umum dipakai:

  1. Indentasi dua spasi untuk isi declaration block, dan satu aturan per baris berkas.
  2. Satu deklarasi per baris, dengan spasi setelah titik dua.
  3. Baris kosong di antara aturan agar batas antarselektor jelas.
  4. Urutan properti berkelompok: layout (display, position), lalu box model (width, margin, padding, border), lalu tipografi (font-size, line-height, color), lalu visual (background, border-radius, opacity). Urutan yang tetap membuat properti yang dicari selalu berada di tempat yang sama.

Perbandingan sebelum dan sesudah:

css 
/* sebelum: benar secara sintaks, lambat dibaca */
.kartu{background-color:#fff;padding:16px;border:1px solid #e2e8f0;border-radius:8px}
.kartu h2{letter-spacing:.5px;font-weight:700}
css 
/* sesudah: rapi, dikelompokkan, mudah ditelaah */
.kartu {
  width: 280px;                        /* box model */
  padding: 16px;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;

  font-weight: 700;                    /* tipografi */
  color: rgb(71, 85, 105);

  background-color: rgb(255, 255, 255); /* visual */
}

Hasil di Browser:

text 
Kartu demo tampil dengan border 1px berwarna rgb(226, 232, 240), sudut
membulat 8px, padding atas 16px, dan latar putih rgb(255, 255, 255).
Judul di dalamnya memakai letter-spacing 0.5px dengan font-weight 700,
sedangkan paragrafnya berwarna rgb(71, 85, 105) dengan line-height 24px.

Kode demo chapter ini ditulis mengikuti kebiasaan di atas — satu deklarasi per baris, kelompok properti terurut, dan nilai warna berformat rgb — sehingga setiap nilai yang diklaim mudah dilacak kembali ke barisnya.