Senang Membuat / Modifikasi Template Blog Berarti Harus Mengenal CSS Specificity

Ternyata bukan hanya untuk teman-teman yang berprofesi sebagai Template Creator, kamu yang punya hobby Memodifikasi Template Blog atau lebih dikenal sebagai Re-Design Template itu wajib mengenal apa itu CSS Specificity.

Kenapa saya mengatakan bahwa CSS Specificity itu wajib kamu ketahui? Di pertengahan paragraf dalam artikel ini sudah saya jelaskan alasannya, jadi simak terus ya.

Mengenal CSS Specificity

Pertama-tama saya mau tanya ke teman-teman, pernah gak sih merasa kebingungan disaat mau modifikasi template blog nya? Sudah di edit marginnya lah atau edit font style nya lah, tapi tampilan templatenya gak mau berubah..

Yess... Akhirnya teman-teman ikut merasakan apa yang pernah saya alami beberapa bulan yang lalu.

Kenapa kali ini saya membahas tentang CSS Specificity? Alasannya sih karena saya mau teman-teman tidak merasakan kebingungan seperti apa yang saya rasakan pada saat itu.

Banyak template creator yang sudah senior sebenarnya tidak memerlukan CSS Specificity lagi untuk membangun sebuah template. Tapi akan ada saatnya nanti seorang Template Creator membutuhkan CSS Specificity agar memudahkan pekerjaannya.

Dari Tadi Bahas CSS Specificity, tapi saya rasa teman-teman masih belum paham yah?

Saya coba jelaskan dari Definisi nya dulu deh yah

Setiap Deklarasi CSS (Selector) memiliki berat yang berbeda-beda. Berat tersebut menentukan seberapa spesifik sebuah elemen dapat dipilih oleh selector.

Pada definisi diatas sudah dijelaskan bahwa ternyata masing-masing element yang kita buat nanti pasti memiliki berat yang berbeda-beda.

Misalnya element HTML yang ukuran beratnya bisa kita anggap 1 (satu), ada pula Class didalam sebuah CSS bisa kita anggap 10x lipat dari berat HTML, dan ID didalam CSS kita anggap 100x lebih berat dari HTML. Ukuran-ukuran inilah yang akan menentukan seberapa spesifik elemen yang kita buat.

Pastinya teman-teman masih bingung yah? Coba perhatikan tabel berikut ini deh.

Inline	CSS ID	CSS Class	Element
1000	100	10	1

Setelah kamu lihat tabel diatas, kamu harus coba salin kode pada syntax dibawah ini kedalam notepad lalu save dengan extensi HTML.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam illum voluptates maiores recusandae minima nulla quaerat modi debitis, nisi perferendis, eum, laborum deleniti earum voluptatem accusamus architecto nostrum quam ut!</p>

<style>
p {color: blue;}

p {color: red;}
</style>

Pertanyaanya adalah : Warna apa yang akan tampil pada paragraf yang sudah kamu simpan tadi setelah kamu lihat hasilnya pada browser kamu?

Yapp... Paragraf yang tampil di browser kita akan menjadi berwarna Merah. Lalu kenapa bukan Biru?
Karena jika saya menuliskan 2 elemen p pada syntax css, maka hasilnya browser akan menimpah selector yang pertama.

Nah ada lagi nih kasus kedua. Coba teman-teman perhatikan syntax berikut.

<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam illum voluptates maiores recusandae minima nulla quaerat modi debitis, nisi perferendis, eum, laborum deleniti earum voluptatem accusamus architecto nostrum quam ut!</p>

<style>
#p1 {color: blue;}

p {color: red;}
</style>

Maka hasilnya yang benar adalah Paragraf kita akan menjadi berwarna biru. Alasannya karena id='P1' itu lebih spesifik dari element p.

Naah kita harus tau juga nih gimana sih cara ngitungnya? Coba perhatikan untuk CSS ID #P1.

Id P1 jika dihitung beratnya mencapai 100, sedangkan P hitungan beratnya hanya 1 karena p adalah suatu elemen html sedangkan id P1 ada didalam elemen P yang berarti bisa juga dianggap dengan kode CSS p#p1 yang nilai beratnya adalah 101. Berikut ini saya berikan Screenshotnya agar teman-teman bisa lebih paham.

Melihat hasil Screenshot diatas, teman-teman bisa membandingan mana yang lebih besar ukurannya ? Menurut perbandingan pada gambar diatas, kita bisa simpulkan bahwa CSS yang berisi p#p1 akan lebih besar nilainya dibandingkan #p1 saja.

Nah kalau teman-teman penasaran mau menghitung CSS Specificity, bisa coba kunjungi situsnya dengan klik tombol dibawah ini.

Untuk tabel inline, akan saya bahas pada artikel selanjutnya yah. Sampai disini saya harap teman-teman semua sudah paham dengan kegunaan CSS Specificity yah.

Apabila masih ada yang mau teman-teman tanyakan, bisa langsung tanya pada kolom komentar yah. Jangan lupa untuk Berlangganan artikel kangwira supaya kamu tidak ketinggalan tips dan trik menarik lainnya seputar Modifikasi Template Blog.