Declaration dan Rule

Kata declaration, declaration block, rule, dan ruleset muncul di hampir setiap dokumentasi CSS, dan sering dipakai saling menggantikan padahal ukurannya berbeda. Ketepatan istilah ini bukan sekadar formalitas: pesan di DevTools, dokumentasi MDN, dan diskusi tim semuanya memakai istilah tersebut, jadi salah menyebut bisa membuat diskusi terasa tidak nyambung. Pada chapter ini kita menegaskan batas antar-istilah, membuktikan bahwa whitespace hampir sepenuhnya bebas, dan menetapkan kapan titik koma wajib ditulis.

Tiga Istilah, Tiga Ukuran #

Rule dan ruleset adalah dua nama untuk hal yang sama; dokumen resmi CSS memakai keduanya bergantian. Contoh yang sama diberi label langsung di kodenya:

h1 {                      /* selector dan kurung buka memulai rule */
  color: #1f6f54;         /* satu declaration */
  font-size: 32px;        /* declaration berikutnya */
}                         /* kurung tutup menutup declaration block sekaligus rule */

Satu rule boleh berisi satu declaration saja, juga boleh belasan. Declaration block yang kosong seperti h1 { } pun sah menurut parser, meskipun tidak berpengaruh apa pun — bila Anda menjumpainya, kemungkinan besar itu sisa penghapusan yang lupa dibersihkan. Sebaliknya, satu declaration tidak pernah berdiri sendiri di luar rule: di CSS klasik, declaration selalu hidup di dalam declaration block.

Berkas CSS nyata hampir selalu berisi banyak rule yang ditulis berurutan. Demo berikut memakai tiga rule sekaligus — satu untuk kartu, satu untuk judulnya, satu untuk isinya:

Tiga rule bekerja pada tiga target berbeda, tetapi bentuk penulisannya identik: selector, kurung kurawal, lalu daftar deklarasi.

Whitespace Hampir Bebas #

Browser tidak peduli jumlah spasi, tab, dan baris baru di sekitar bagian-bagian aturan: sebelum dan sesudah {, sesudah :, dan sesudah ;. Tiga penulisan berikut maknanya identik:

/* Bentuk panjang, lazim di berkas sungguhan */
h1 {
  color: #1f6f54;
  font-size: 32px;
}

/* Bentuk satu baris, hasilnya sama persis */
h1 { color: #1f6f54; font-size: 32px; }

/* Bahkan acak sekalipun, tetap sah */
h1    { color  :   #1f6f54 ;  font-size : 32px ;   }

Kebebasan ini menjelaskan mengapa gaya penulisan antar-tim bisa berbeda tanpa mempengaruhi hasil. Namun ada satu batas penting: spasi di dalam value justru bermakna. Value 10px 20px berarti dua nilai berbeda, sedangkan 10px20px tidak valid karena browser tidak menemukan batas antara keduanya. Spasi di sekitar simbol boleh ditambah atau dikurangi; spasi antar nilai adalah bagian dari value itu sendiri.

Karena browser menerima segalanya, disiplin format murni urusan manusia — dan di situlah peran alat bantu. Linter seperti stylelint bisa dipasang untuk menegakkan satu gaya penulisan: satu deklarasi per baris, spasi setelah titik dua, dan seterusnya. Bila bekerja dalam tim, sepakati gayanya sekali lalu serahkan penjagaannya ke alat, bukan ke mata yang lelah.

Kapan Titik Koma Wajib #

Titik koma berperan sebagai pemisah antar-deklarasi. Aturannya presisi:

• Wajib di antara dua declaration.
• Boleh dihilangkan pada declaration terakhir sebelum }.

/* Sah: declaration terakhir tanpa titik koma */
h1 { color: #1f6f54; font-size: 32px }

/* Dianjurkan: titik koma selalu, siap menampung deklarasi baru */
h1 {
  color: #1f6f54;
  font-size: 32px;
}

.banner {
  color: #fff8e1      /* titik koma terlewat di sini */
  background-color: #4e342e;
}

Demo berikut membandingkan rule tanpa titik koma dengan versi lengkapnya:

Karena itu konvensi yang dianjurkan sederhana: selalu akhiri setiap declaration dengan titik koma, termasuk yang terakhir. Tambahan satu karakter tersebut melindungi kita saat menambah deklarasi baru di bawahnya — kesalahan yang paling sering terjadi justru pada baris yang baru disunting.

Ringkasan #

Declaration adalah pasangan property dan value; declaration block membungkusnya di antara kurung kurawal; rule adalah gabungan selector dan declaration block — tiga ukuran yang perlu kita sebut dengan tepat. Whitespace di sekitar simbol bebas diatur, tetapi spasi di dalam value adalah bagian dari nilai. Biasakan titik koma di akhir setiap deklarasi agar satu kelalaian kecil tidak merenggut dua gaya sekaligus. Selanjutnya kita membahas alat bantu menulis CSS yang paling sederhana: komentar.