Anatomi aturan

Stylesheet sepanjang apa pun tersusun atas satuan yang sama, yaitu aturan CSS. Topik ini membedah struktur sebuah aturan, mulai dari selector, blok deklarasi, properti, dan nilai, hingga detail kecil seperti titik koma dan komentar. Pembedahan ini juga mencakup deklarasi yang diabaikan browser karena penulisannya keliru. Setelah membacanya, aturan pada berkas CSS mana pun dapat dibaca dan ditulis dengan yakin.

Struktur sebuah aturan#

Sebuah aturan CSS terdiri atas dua bagian besar, yaitu selector dan blok deklarasi. Selector menyatakan elemen mana yang dituju, sedangkan blok deklarasi memuat daftar deklarasi yang diapit kurung kurawal. Setiap deklarasi memasangkan satu properti dengan nilainya dan diakhiri tanda titik koma. Contoh berikut memberi warna dan jarak baris pada semua paragraf.

p {
  color: #1e293b;
  line-height: 1.6;
}

Bagian color: #1e293b; merupakan satu deklarasi yang tersusun atas properti color dan nilai #1e293b. Bagian line-height: 1.6; adalah deklarasi kedua dengan pola yang sama. Tanda titik koma berperan sebagai pemisah antardeklarasi. Penulisan titik koma pada deklarasi terakhir sebelum kurung penutup bersifat opsional, tetapi menuliskannya secara konsisten mencegah kelupaan ketika deklarasi baru ditambahkan.

Selector p pada contoh menunjuk seluruh elemen p dalam dokumen. Selector juga dapat berbentuk atribut class, atribut id, kombinasi keduanya, hingga keadaan interaktif seperti :hover. Untuk kebutuhan topik ini, selector nama elemen dan selector class sudah cukup.

Diagram berikut memetakan setiap bagian aturan beserta namanya.

Beberapa selector dalam satu aturan#

Beberapa selector yang menuntut deklarasi sama dapat digabungkan menjadi satu aturan. Kebutuhan itu sering muncul pada judul bertingkat, yang biasanya diberi ketebalan dan warna yang seragam. Setiap selector dipisahkan tanda koma, dan seluruh deklarasi pada blok kurung kurawal berlaku untuk semua selector dalam daftar.

h1,
h2,
h3 {
  font-weight: bold;
  color: #0f172a;
}

Tanpa penggabungan, tiga aturan terpisah perlu ditulis dengan isi identik, sehingga setiap perubahan nilai harus dilakukan di tiga tempat. Bentuk penggabungan menjaga deklarasi tetap seragam secara otomatis, sekaligus memperjelas niat bahwa seluruh selector memang sengaja diberi perlakuan yang sama. Urutan selector dalam daftar tidak memengaruhi hasil, dan spasi di sekitar tanda koma boleh ditulis maupun tidak. Konvensi yang lazim adalah satu selector per baris, sebagaimana contoh di atas, agar daftar yang panjang tetap mudah diperiksa.

Spasi, pemformatan, dan komentar#

Browser mengabaikan jumlah spasi, tab, dan baris baru di luar nilai yang sedang dinyatakan. Satu aturan dapat ditulis dalam satu baris panjang atau dipecah menjadi beberapa baris, dan keduanya bermakna sama bagi browser. Pemformatan yang rapi dipilih demi keterbacaan, bukan demi perilaku program.

/* format bertingkat */
p {
  color: #1e293b;
}

/* format satu baris */
p { color: #1e293b; }

Komentar ditulis di antara /* dan */, dan seluruh isinya diabaikan browser. Komentar dapat menempati satu baris penuh, sebagian baris, atau beberapa baris sekaligus. Berbeda dengan beberapa bahasa lain, CSS tidak mengenal komentar satu baris bergaya //, sehingga bentuk itu jangan digunakan. Komentar juga tidak dapat bersarang, karena tanda */ yang pertama langsung menutup komentar.

Penempatan komentar berfungsi sebagai penanda bagi pembaca berkasnya. Pada tingkat aturan, satu baris komentar menjelaskan tujuan kelompok gaya yang mengikutinya, misalnya /* jarak antar kartu */ di atas aturan yang mengatur margin. Pada tingkat deklarasi, komentar singkat di ujung baris menjelaskan keputusan yang tidak terlihat dari nilainya, misalnya nilai yang sengaja ditiru dari gaya bawaan browser agar penggantinya mudah ditelusuri. Kebiasaan ini diperdalam pada topik komentar dan pengorganisasian.

Deklarasi yang diabaikan#

Deklarasi dengan properti atau nilai yang tidak dikenal tidak membuat CSS gagal dimuat. Browser melewatkan deklarasi tersebut dan tetap menjalankan deklarasi lain pada aturan yang sama. Perilaku ini disebut pemulihan error (error recovery) dan berlaku per deklarasi, bukan per berkas.

p {
  colr: #b91c1c;      /* properti tidak dikenal, diabaikan */
  color: #1e293b;     /* diterapkan */
  line-height: satu;  /* nilai tidak valid, diabaikan */
}

Kesalahan semacam ini tidak memunculkan pesan error, baik pada halaman maupun pada konsol browser. Gejalanya hanya berupa gaya yang tidak berlaku tanpa penjelasan, dan kasus ini sering memakan waktu pencarian yang panjang. Panel Styles pada DevTools menandai deklarasi yang diabaikan dengan coretan, sehingga tanda tersebut menjadi petunjuk pertama saat mencari penyebabnya. Karena itulah, penulisan satu deklarasi per baris membantu pada proyek nyata. Deklarasi yang bermasalah langsung terlihat letaknya.

Kesalahan umum#

Kesalahan pertama adalah kurung kurawal penutup yang hilang. Seluruh teks sesudah kurung buka diperlakukan sebagai bagian dari aturan yang belum selesai, sehingga aturan-aturan berikutnya ikut terabaikan. Ketika banyak aturan tiba-tiba tidak berlaku sekaligus, menghitung pasangan kurung kurawal adalah pemeriksaan pertama yang murah.

Kesalahan kedua adalah menyisipkan satu selector yang tidak valid pada daftar selector yang dipisah koma. Berbeda dengan deklarasi, kesalahan pada salah satu selector membatalkan seluruh aturan, bukan hanya selector yang keliru. Apabila keabsahan sebuah selector diragukan, aturannya dipisahkan ke blok tersendiri agar aturan lain tidak ikut terdampak.

Kesalahan ketiga adalah tanda kutip yang tidak memiliki pasangan, misalnya pada nilai teks properti content. Sisa aturan setelah tanda kutip ikut terbaca sebagai bagian dari nilai, dan deklarasi itu pun diabaikan. Kebiasaan menutup setiap tanda kutip segera setelah membukanya mencegah kasus ini.

Ringkasan#

• Satu aturan CSS terdiri atas selector dan blok deklarasi yang diapit kurung kurawal.
• Setiap deklarasi memasangkan properti dengan nilai, dan deklarasi dipisahkan tanda titik koma.
• Spasi dan pemformatan tidak memengaruhi makna, sedangkan komentar /* */ diabaikan browser dan tidak dapat bersarang.
• Deklarasi yang tidak valid diabaikan satu per satu, sedangkan selector yang tidak valid membatalkan seluruh aturannya.

Referensi#

• Syntax — MDN — Panduan resmi struktur aturan CSS, dari selector hingga blok deklarasi.
• Comments — MDN — Dokumentasi resmi sintaks komentar CSS beserta keterbatasannya.
• Learn CSS — web.dev — Kursus resmi Google dengan penjelasan anatomi aturan pada modul pembukanya.