Satu rule dengan satu declaration memang sah, tetapi hampir tidak pernah cukup. Sebuah kartu produk butuh padding, border, warna latar, dan warna teks sekaligus; sebuah tombol butuh setidaknya empat deklarasi agar terlihat layak diklik. Pada chapter ini kita menulis banyak declaration dalam satu blok, memahami apa yang terjadi bila satu property ditulis dua kali, dan menetapkan konvensi penulisan agar blok yang panjang tetap mudah dipindai.

Banyak Declaration, Satu Target #

css 
.kartu-profil {
  padding: 20px;
  border: 1px solid #d9d2c0;
  border-radius: 12px;
  background-color: #fffdf7;
  color: #3f2d20;
}

Mari kita telaah:

  1. Setiap baris adalah satu declaration mandiri: property, titik dua, value, titik koma.
  2. Kelima declaration diterapkan semuanya; tidak ada yang saling meniadakan karena property-nya berbeda.
  3. Urutan baris di antara property yang berbeda tidak berpengaruh — background-color boleh dipindah ke baris paling bawah tanpa mengubah hasil.

Tidak ada batas resmi jumlah declaration dalam satu blok; blok berisi belasan deklarasi adalah pemandangan biasa di stylesheet nyata. Satu hal yang membantu membaca blok panjang: seluruh deklarasi di dalamnya menyasar elemen yang sama, jadi setiap baris menjawab pertanyaan “elemen ini seperti apa”, bukan pertanyaan yang berbeda-beda. Yang menentukan kenyamanan kerja bukan jumlahnya, melainkan tatanannya — dan itulah topik dua bagian terakhir chapter ini.

Ketika Property yang Sama Ditulis Dua Kali #

Apa yang terjadi bila property yang sama muncul dua kali dalam satu blok? Browser menerapkan declaration secara berurutan, sehingga yang ditulis belakangan menimpa yang ditulis lebih dulu:

css 
.status-pesanan {
  color: #b91c1c;
  color: #166534;
}

Deklarasi merah tetap diurai browser, tetapi hasil akhirnya digantikan deklarasi hijau yang berada setelahnya — tukar urutan keduanya pada demo, dan hasilnya berbalik menjadi merah. Pola ini adalah bagian kecil dari mekanisme cascade yang kita bahas mendalam pada section tersendiri; untuk saat ini cukup ingat satu kalimat: di dalam satu blok, untuk property yang sama, yang terakhir menang.

Penimpaan seperti ini hampir selalu tanda ada yang keliru — misalnya deklarasi lama yang lupa dihapus. Kecuali disengaja untuk pola nilai cadangan, hindari menulis property yang sama dua kali dalam satu blok supaya niat kode sesuai hasilnya.

Ketika curiga ada deklarasi ganda, dua alat membantu: pencarian editor pada nama property untuk memeriksa satu blok secara cepat, dan panel Styles di DevTools yang mencoret deklarasi yang sudah ditimpa — deklarasi merah pada contoh di atas akan tampil dengan garis coret begitu diinspeksi.

Mengelompokkan Property yang Saling Berkaitan #

Blok yang panjang jauh lebih mudah dibaca bila deklarasi dikelompokkan menurut perannya: kelompok layout terlebih dulu, lalu box model, lalu tipografi dan warna, dengan baris kosong sebagai pemisah kelompok:

css 
.nav-utama {
  display: flex;
  gap: 12px;

  padding: 12px 20px;
  background-color: #14503a;

  color: #f4fbf7;
  font-size: 15px;
}

Urutan kelompok semacam ini adalah konvensi komunitas, bukan aturan CSS — browser membaca hasilnya sama persis apa pun urutannya. Konsistensi memilih satu urutan dan mematuhinya lebih penting daripada memperdebatkan urutan mana yang paling benar.

Konvensi Penulisan yang Rapi #

Perbandingan berikut menunjukkan mengapa format layak diperhatikan:

css 
/* Sah bagi browser, sulit dibaca manusia */
.nav-utama{display:flex;gap:12px;padding:12px 20px;color:#f4fbf7}
css 
/* Satu declaration per baris: mudah dipindai dan diubah */
.nav-utama {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  color: #f4fbf7;
}

Konvensi yang lazim diikuti:

  • Satu declaration per baris, dengan indentasi dua spasi yang konsisten.
  • Kurung buka di baris yang sama dengan selector; kurung tutup sendirian di barisnya.
  • Satu spasi setelah titik dua; satu spasi sebelum kurung buka.
  • Baris kosong antar kelompok deklarasi bila bloknya panjang.

Format seperti ini juga membantu pencarian: saat mencari “background-color”, hasilnya hanya satu baris per deklarasi, bukan satu baris berisi seluruh rule.

Ringkasan #

Satu blok rule menampung sebanyak apa pun declaration yang kita butuhkan: property yang berbeda saling melengkapi, sedangkan property yang sama memutuskan pemenang lewat urutan penulisan. Kelompokkan deklarasi yang serumpun dan patuhi satu konvensi penulisan agar blok panjang tetap mudah dipindai. Berikutnya kita berpindah ke sisi selector: satu gaya untuk banyak elemen sekaligus.