# Apa Itu Spesifisitas CSS?
Spesifisitas CSS adalah algoritma yang digunakan browser untuk memutuskan nilai properti mana yang diterapkan pada elemen tertentu. Ini pada dasarnya adalah skor matematis yang memberi tahu browser "seberapa spesifik" suatu aturan.Jika dua aturan memiliki tingkat spesifisitas yang berbeda, aturan dengan bobot lebih tinggi akan menang, terlepas dari urutan penulisannya. Jika keduanya memiliki bobot yang sama, aturan terakhir yang dinyatakan dalam kode sumber yang menang.# Cara Menghitung Spesifisitas CSS
Spesifisitas dihitung berdasarkan tiga kategori yang membentuk bobot tiga kolom, sering dinyatakan sebagai (A, B, C):- Kolom A (ID): Menghitung jumlah pengidentifikasi unik. Contoh:
#headerdihitung sebagai 1 di kolom A. - Kolom B (Kelas, Atribut, dan Kelas Semu): Menghitung semua kelas (
.button), atribut ([type="text"]), dan kelas semu (:hover). - Kolom C (Elemen dan Elemen Semu): Menghitung semua elemen HTML (
div,h1) dan elemen semu (::before).
# Aturan Emas: Tidak Ada Peralihan Numerik
Aturan dengan spesifisitas (0,50,0) tidak akan pernah lebih spesifik daripada aturan (1,0,0). Satu ID mengalahkan kelas yang tak terhingga jumlahnya. Kolom tidak pernah melimpah satu sama lain.
# Masalah dengan !important dan Arsitektur BEM
Arahan!important adalah pengecualian untuk aturan spesifisitas. Saat digunakan, deklarasi tersebut secara otomatis menimpa yang lain. Ini dianggap sebagai praktik buruk karena merusak kaskade alami.Untuk menghindari perang spesifisitas dalam proyek besar, metodologi seperti BEM menyarankan penggunaan selektor kelas kedalaman tunggal saja, secara artifisial menjaga spesifisitas tetap datar di (0,1,0).