Panduan Pemula untuk Kekhususan CSS

Pernahkah Anda mencoba mengganti aturan CSS, hanya untuk menemukannya tidak berfungsi sebagaimana mestinya? Atau perhatikan ketika satu elemen ditargetkan berkali-kali dengan kombinasi pemilih CSS yang berbeda, hanya satu aturan yang diterapkan dalam satu waktu? Ini semua karena aturan kekhususan CSS.

Aturan kekhususan CSS bisa menjadi salah satu konsep yang paling membingungkan untuk dipahami, terutama bagi pemula.

Jika Anda baru memulai dengan CSS, sebagai aturan urutan standar, Anda mungkin berpikir bahwa aturan CSS terbaru harus menggantikan yang lama. Tampaknya sederhana, tetapi tidak selalu berhasil seperti itu. Itu tergantung pada kekhususan CSS, kapan dan aturan CSS mana yang harus diterapkan.

Jadi mari kita uraikan apa itu kekhususan CSS dan bagaimana menggunakannya secara efisien.

Apa Kekhususan dalam CSS?

Dengan kata sederhana, jika Anda memiliki beberapa pemilih CSS untuk satu elemen, elemen dengan nilai spesifik yang lebih tinggi akan diterapkan.

Selektor yang berbeda memiliki bobot yang berbeda dan browser akan memutuskan mana yang paling relevan dengan elemen tersebut.

Bagaimana cara kerjanya?

Kekhususan pemilih dapat dikategorikan dalam empat tingkatan berikut:

1. Gaya sebaris atau CSS
2. ID
3. Kelas, kelas semu, dan atribut
4. Elemen atau elemen semu

Gaya sebaris atau CSS , di mana CSS diterapkan langsung pada dokumen HTML, terlihat seperti ini <p> ​​. Gaya sebaris akan selalu memiliki tingkat kekhususan tertinggi.

Kedua dalam urutan ini adalah ID , seperti #content . Jadi setiap pemilih yang menggunakan ID akan memiliki tingkat spesifisitas tertinggi kedua.

Classes , pseudo-classes , dan atribut ketiga dalam urutan ini. Mereka terlihat seperti: .post , :hover , dan [title] , masing-masing.

Elemen dan elemen semu memiliki nilai paling kecil. li dan :after adalah contoh dasar dari elemen dan elemen semu.

Penghitungan

Nilai spesifisitas dapat dihitung dengan pedoman berikut:

• Gaya sebaris atau css: 1,0,0,0
• ID: 0,1,0,0
• Kelas atau pseudo-class dan atribut: 0,0,1,0
• Elemen dan elemen semu: 0,0,0,1
• Selektor universal (*): 0

Untuk memeriksa tingkat spesifisitas pemilih Anda, Anda dapat menggunakan Kalkulator spesifisitas.

Aturan Dasar Kekhususan CSS

Sekarang setelah Anda memiliki gagasan tentang bagaimana spesifisitas diatur, mari kita bahas beberapa aturan dan contoh umum!

Ini adalah HTML dasar yang akan saya gunakan dalam contoh saya. Di sini saya memiliki daftar kecil di dalam wadah dengan #content .

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Aturan 1

Jika Anda memiliki dua atau lebih pemilih yang sama untuk suatu elemen, semuanya akan memiliki nilai spesifisitas yang sama, sehingga yang lebih rendah atau yang terakhir akan diterapkan.

Dalam cuplikan CSS berikut, kedua pemilih memiliki spesifisitas yang sama, sehingga warna li akan menjadi kuning, karena ditempatkan lebih jauh ke bawah.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Aturan 2

Jika beberapa pemilih digunakan untuk satu elemen, pemilih dengan nilai spesifik yang lebih tinggi akan diterapkan.

Dalam contoh berikut, li ditargetkan oleh dua penyeleksi berbeda dan keduanya memengaruhi warna font. Jadi, aturan mana yang harus diterapkan?

Seperti contoh sebelumnya, dalam konsep urutan CSS yang kedua harus diterapkan (sehingga warna li akan menjadi hijau) tetapi karena .list li memiliki nilai spesifisitas yang lebih tinggi daripada ul li , warnanya akan tetap merah.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Aturan 3

Kami melihat kelas melebihi elemen dalam tingkat spesifisitas, sekarang mari kita lihat apa yang terjadi dengan ID.

Dalam contoh berikut, kami memiliki kelas dan ID yang menargetkan elemen yang sama dan memengaruhi warna font. Sekali lagi pertanyaan yang sama: aturan mana yang harus diterapkan?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Seperti yang telah disebutkan sebelumnya, ID memiliki nilai spesifisitas yang lebih tinggi daripada kelas, atribut, dan elemen, sehingga warnanya menjadi biru. Selalu targetkan ID untuk tingkat kekhususan yang lebih tinggi.

Aturan 4

!important akan mengesampingkan pemilih apa pun dari nilai spesifisitas apa pun. Namun perlu diingat bahwa !important tidak boleh digunakan secara berlebihan, karena tidak dianggap sebagai praktik terbaik CSS.

Jika Anda adalah pembuat CSS Anda dan tidak mengesampingkan aturan yang ada, Anda hampir tidak perlu menggunakan !important .

Gunakan !important hanya ketika Anda mencoba mengganti CSS orang lain dan kekhususan Anda tidak dapat melebihi pemilih sebelumnya, terutama ketika Anda tidak dapat mengontrol urutan penempatan CSS Anda di HTML.

Ini akan terjadi sebagian besar saat bekerja di WordPress, di mana Anda akan menemukan banyak file CSS yang sudah ditambahkan oleh berbagai plugin dan tema.

Secara umum, plugin CSS khusus untuk plugin dan menggunakan ID, inline-css, atau bahkan !important untuk kekhususan yang lebih tinggi, untuk menghindari konflik CSS. Untuk mengganti CSS itu, Anda harus menggunakan kekhususan yang lebih tinggi; untuk skenario ini Anda dapat menggunakan !important .

Dalam contoh berikut, saya membuat ulang skenario sebelumnya, dengan li ditargetkan dengan pemilih CSS yang berbeda, tetapi Anda dapat melihat bahwa !important menimpa semua aturan dan warnanya akan menjadi kuning.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important akan memberi Anda kekuatan untuk menegakkan CSS Anda di atas tingkat spesifisitas apa pun.

Anda harus berhati-hati saat menggunakan !important karena Anda tidak dapat mengesampingkan aturan ini. Satu-satunya cara untuk mengganti !important adalah dengan menggunakan !important lain nanti di CSS, sehingga CSS Anda dapat dengan mudah terlihat berantakan jika Anda tidak memahami kekuatannya.

Beberapa pengecualian

Elemen dan elemen semu memiliki kekhususan paling sedikit, tetapi ada beberapa pengecualian yang menarik (dan sedikit membingungkan!). (Membingungkan karena mereka sepertinya tidak mengikuti aturan yang baru saja kita lihat.)

Dalam contoh ini, Anda akan melihat :first-child (pseudo-class) dan :first-line (pseudo-element). Kami baru saja mengetahui bahwa kelas semu akan memiliki kekhususan yang lebih tinggi daripada elemen semu, jadi menurut itu, warna baris pertama paragraf harus hijau, tetapi sebaliknya akan berwarna merah muda.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

Anda mungkin mengira pemesanan akan menjadi masalah di sini, tetapi bahkan mengganti urutan tidak akan mengubah hasilnya. Kalkulator spesifisitas menunjukkan gambaran yang berbeda dari hasilnya.

Di sinilah kekhususan menjadi sedikit membingungkan. Saya hanya dapat berasumsi bahwa alasan untuk hasil ini adalah :first-line lebih dekat ke elemen dan mungkin diperlakukan sebagai gaya sebaris. Anda dapat memeriksa jsfiddle untuk contoh lain.

Bagaimana cara menggunakan spesifisitas secara efisien?

Jika Anda memahami aturan kekhususan CSS, Anda dapat menggunakannya dengan sangat efisien dan membuat CSS Anda dapat digunakan kembali.

Katakanlah Anda ingin menggunakan .button yang sama tetapi dengan warna latar belakang yang berbeda, jadi Anda menyiapkan pemilih tertentu: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

Jika .button dibungkus dalam wadah .red-block , maka warna latar tombol default akan berubah menjadi merah.

Kekhususan CSS sangat berguna saat menyesuaikan tema WordPress, di mana Anda mencoba mengganti CSS penulis tema dengan milik Anda.

Kesalahan umum yang harus dihindari

Beberapa orang menggunakan penyeleksi ultra-spesifik, yang bukan praktik yang baik. Jadilah sespesifik yang diperlukan saja. Misalnya, cuplikan kode ini menargetkan li tetapi terlalu spesifik.

 [css] div#content ul.list li{ color: purple; } [/css]

Jika Anda terlalu spesifik dengan CSS Anda, itu akan menjadi kaku dan sulit untuk digunakan kembali. Anda dapat dengan mudah menulis .list li alih-alih div#content ul.list li , yang akan membuat CSS Anda lebih bersih.

Sumber daya tambahan

• W3 org pada spesifisitas
• Kalkulator spesifisitas CSS
• YAITU Bug
• yaitu Peretasan

Kesimpulan

Seperti yang Anda lihat, kekhususan CSS adalah alat penting dan setiap pengembang front-end harus memilikinya di perangkat mereka. Pemahaman yang jelas tentang konsep ini dapat membuat Anda menjadi pengembang front-end yang baik.