Mengatasi Conflicting Styles

Gejala yang paling sering dilaporkan pemula adalah sebuah deklarasi yang “tidak mau berlaku”: warna tombol tidak berubah, ukuran font tidak bergeser, padahal aturan tampak benar. Penyebabnya hampir selalu salah satu dari lima mekanisme yang telah kita pelajari pada section ini — origin, specificity, source order, inheritance, atau cascade layers. Karena itu diagnosis konflik tidak memerlukan tebakan, melainkan prosedur berurutan yang memeriksa mekanisme satu per satu. Chapter ini merangkum seluruh section menjadi prosedur kerja, mengujinya pada studi kasus nyata, dan menutup dengan kebiasaan yang mencegah konflik berulang.

Checklist Diagnosis Konflik Gaya #

Buka panel Styles pada browser DevTools, pilih elemen yang bermasalah, lalu periksa lima hal berikut secara berurutan:

1. Deklarasi mana yang menang sekarang? Panel Styles menampilkan semua deklarasi yang cocok; yang kalah dicoret (struck through). Nama sumbernya — user agent stylesheet, file, atau elemen style="" — menunjukkan asal origin.
2. Apakah pemenangnya dari origin berbeda? Gaya user-agent hanya menang bila tidak ada deklarasi author yang cocok. Gaya !important berada di jalur terpisah dengan urutan yang terbalik.
3. Bandingkan specificity deklarasi penimpa dengan deklarasi pemenang. DevTools mengelompokkan aturan per selector sehingga bobot (a, b, c) mudah dihitung.
4. Periksa source order bila specificity seri: aturan yang sama kuat dan ditulis belakangan menang. Perhatikan juga @import dan urutan <link>.
5. Periksa inheritance dan layer: bila elemen tidak punya deklarasi sendiri, nilainya mungkin warisan induk atau hasil urutan @layer.

Tabel ringkas pola yang sering muncul:

Studi Kasus: Tombol yang Menolak Berubah Warna #

Kasusnya: sebuah baseline button menetapkan latar abu-abu, komponen .tombol-utama ingin latar biru, tetapi tombol di panel lama tetap abu-abu. File contoh-diagnosis.css pada bundle chapter ini memuat ketiga aturan tersebut:

button {
  background-color: rgb(100, 116, 139);
  color: rgb(255, 255, 255);
  border: 0;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 16px;
}

.tombol-utama {
  background-color: rgb(2, 132, 199);
}

/* Aturan warisan lama: specificity (1, 1, 0) mengalahkan .tombol-utama */
#panel-lama .tombol-utama {
  background-color: rgb(100, 116, 139);
}

<div id="panel-lama">
  <button class="tombol-utama">Simpan perubahan</button>
</div>
<div id="panel-bersih">
  <button class="tombol-utama">Simpan perubahan</button>
</div>

Hasil di Browser:

Tombol pada panel pertama tampil abu-abu (background-color rgb(100, 116, 139)):
aturan warisan #panel-lama .tombol-utama (1,1,0) mengalahkan .tombol-utama
(0,1,0).
Tombol pada panel kedua tampil biru (rgb(2, 132, 199)): tanpa aturan warisan,
.tombol-utama (0,1,0) menang atas baseline button (0,0,1).
Pada baris status, span pertama mewarisi abu-abu (rgb(51, 65, 85)) dari induknya,
sedangkan span kedua tampil merah (rgb(185, 28, 28)) karena memiliki deklarasi
langsung.

Mari kita jalankan prosedur diagnosisnya:

1. Panel Styles menunjukkan #panel-lama .tombol-utama menang dan .tombol-utama dicoret. Pemenangnya masih author, jadi origin bukan masalahnya.
2. Specificity: (1, 1, 0) mengalahkan (0, 1, 0). Angka 1 pada komponen ID berasal dari sisa kode lama — bukan kebutuhan desain.
3. Solusi terbaik adalah menghapus aturan warisan. Demo memperlihatkan hasilnya melalui panel kedua: tanpa pesaing, .tombol-utama menang atas baseline button dan tombol tampil biru.
4. Kasus warisan: pada baris status, span pertama tanpa deklarasi mengikuti warna induk (abu-abu), sedangkan span kedua memiliki deklarasi color langsung sehingga tampil merah — deklarasi langsung selalu mengalahkan warisan.

Kebiasaan yang Mencegah Konflik Berulang #

Tiga kebiasaan menjaga stylesheet tetap mudah didiagnosis. Pertama, tulis gaya dasar dengan specificity serendah mungkin; selector :where() (specificity nol) membantu menjaga baseline tetap mudah ditimpa — rinciannya ada pada MDN :where . Kedua, kelompokkan sumber gaya ke dalam @layer sejak awal proyek sehingga urutan prioritas tertulis eksplisit, sebagaimana dibahas pada Chapter Cascade Layers . Ketiga, perlakukan !important sebagai pintu darurat untuk utility class, bukan alat penimpa harian — pemetaan lengkap mekanisme cascade ada kembali pada Chapter Cascade Origins .

Demo chapter ini membawa empat elemen uji dengan atribut data-expected — dua tombol dan dua span — sehingga hasil diagnosis di atas diverifikasi otomatis oleh harness Course.

/* Baseline generik: specificity (0, 0, 1) */
button {
  background-color: rgb(100, 116, 139);
  color: rgb(255, 255, 255);
  border: 0;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 16px;
}

/* Komponen: specificity (0, 1, 0) */
.tombol-utama {
  background-color: rgb(2, 132, 199);
}

/* Aturan warisan lama: specificity (1, 1, 0) mengalahkan .tombol-utama */
#panel-lama .tombol-utama {
  background-color: rgb(100, 116, 139);
}