# Wat is CSS-specificiteit?
CSS-specificiteit is het algoritme waarmee browsers bepalen welke eigenschapswaarden op een bepaald element worden toegepast. Het is in feite een wiskundig getal dat de browser vertelt hoe "specifiek" een regel is.Als twee regels verschillende specificiteitsniveaus hebben, wint degene met het hoogste gewicht, ongeacht de volgorde waarin ze zijn geschreven. Als beide hetzelfde gewicht hebben, wint de laatste die in de broncode is gedeclareerd.# CSS-specificiteit berekenen
Specificiteit wordt berekend op basis van drie categorieën die samen een driekolomsgewicht vormen, vaak uitgedrukt als (A, B, C):- Kolom A (ID's): Telt het aantal unieke identificatoren. Voorbeeld:
#headertelt als 1 in kolom A. - Kolom B (Klassen, Attributen en Pseudo-klassen): Telt alle klassen (
.button), attributen ([type="text"]) en pseudo-klassen (:hover). - Kolom C (Elementen en Pseudo-elementen): Telt alle HTML-elementen (
div,h1) en pseudo-elementen (::before).
# De gouden regel: geen numerieke doorloop
Een regel met specificiteit (0,50,0) zal nooit specifieker zijn dan een regel (1,0,0). Één enkel ID verslaat oneindig veel klassen. Kolommen lopen nooit in elkaar over.
# Het probleem met !important en BEM-architectuur
De!important-richtlijn is een uitzondering op de specificiteitsregels. Wanneer gebruikt, overschrijft die declaratie automatisch alles. Het wordt als slechte praktijk beschouwd omdat het de natuurlijke cascade vernietigt.Om specificiteitsoorlogen in grote projecten te vermijden, pleiten methodologieën zoals BEM voor het gebruik van uitsluitend één niveau van klasse-selectors, waardoor de specificiteit kunstmatig vlak op (0,1,0) wordt gehouden.