Ternyata bukan hanya untuk para senior yang berprofesi sebagai Template Creator saja genks, kita yang punya hobby Me-modifikasi Tampilan Blog atau lebih dikenal sebagai Re-Design Template ini juga wajib mengenal apa itu CSS Specificity.
Kenapa saya mengatakan bahwa CSS Specificity itu wajib kita ketahui? Di pertengahan paragraf dalam artikel ini akan saya jelaskan alasannya, jadi simak terus ya.
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..
Kalau jawabannya PERNAH..
Berarti kalian bisa ikut merasakan apa yang pernah saya alami beberapa bulan yang lalu.
Kenapa saya bahas soal CSS Specificity di blog ini?
Alasannya sih karena saya gak mau teman-teman juga merasakan kebingungan seperti yang saya rasakan pada saat itu.
Simple ya alasannya
Banyak template creator yang sudah senior diluar sana sebenarnya tidak memerlukan CSS Specificity lagi untuk membangun sebuah struktur template.
Tapi menurut saya, nanti akan ada saatnya dimana 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 lebih berat dari element HTML, dan ID didalam CSS kita anggap 100x lebih berat dari element HTML.
Ukuran-ukuran inilah yang akan menentukan seberapa spesifik elemen sebuah halaman yang sedang 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 kita simpan tadi ?
Klik 2x pada File HTML yang sudah kita buat tadi, lalu lihat hasilnya dalam browser
Ya.. Paragraf yang tampil di browser kita akan menjadi berwarna Merah, tapi kenapa bukan warna Biru?
Karena jika saya menuliskan 2 elemen p pada syntax css, maka hasilnya browser akan membaca dan menimpah selector yang pertama.
Paham yah?
Nah saya punya contoh lagi nih di kasus kedua, coba teman-teman perhatikan syntax berikut ini.
<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>Pada paragraf diatas, saya menambahkan ID didalam element HTML.
Maka hasilnya yang benar adalah Paragraf kita akan menjadi berwarna biru. Alasannya karena ID itu lebih spesifik dari Element.
Naah kita harus tau juga nih gimana sih cara ngitungnya?
Coba perhatikan lagi tabel specificity diatas, berapa nilai untuk CSS ID ditabel itu?
CSS ID jika dihitung beratnya mencapai 100, sedangkan Element hitungan beratnya hanya 1.
Nah karena P adalah suatu Element HTML yang sudah kita bumbui CSS ID P1 didalam didalamnya, maka bisa juga kita tulis 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, kita bisa membandingan mana yang lebih besar ukurannya kan?
Menurut perbandingan pada gambar diatas, kita bisa simpulkan bahwa CSS yang berisi p#p1 dengan nilai 101 akan lebih besar nilainya dibandingkan #p1 saja dengan nilai 100.
Nah kalau teman-teman penasaran mau menghitung CSS Specificity, bisa coba kunjungi situsnya dengan klik tombol dibawah ini.
CSS SpecitifityUntuk CSS 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 di blog ini supaya kamu tidak ketinggalan tips dan trik menarik lainnya seputar Modifikasi Template Blog.
