Als u van plan bent om regelmatig CSS te gebruiken, moet u inzicht krijgen in wat specificiteit is en hoe het wordt toegepast.
Anders dan drijvers en posities, kan specificiteit een van de moeilijkste dingen zijn om aan te wennen, laat staan te beheersen. De selectors die u in uw CSS gebruikt, hebben allemaal verschillende gewichten en die worden bepaald op specificiteit. Daarom wordt het soms niet weergegeven in je ontwerp wanneer je een regel op een element toepast.
Als je ooit hebt vertrouwd op het gevreesde! Belangrijke sleutelwoord om je CSS te hacken, dan is dit artikel iets voor jou.
Om je fundamenten solide te maken, moet je weten hoe de browser CSS leest en hoe regels worden opgeheven.
Ten eerste zal de browser een stylesheet van boven naar beneden lezen, wat betekent dat met deze code:
/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}De regel die u op regel 10 hebt opgegeven, wordt overschreven en die ankertag wordt blauw omdat de browser regels verderop in uw CSS beschouwt om een hogere prioriteit te behouden.
Dit werkt ook met de daadwerkelijke volgorde waarin u uw CSS-bestanden importeert, bijvoorbeeld:
Aangezien je de custom.css na de style.css hebt geplaatst, wordt alles wat je in style.css schrijft (voor nu disconteren, het gewicht van selectors) onderdrukt en vervangen door wat zich in custom.css bevindt, wordt deze techniek vaak gebruikt door makers van thema's om de gebruiker wat ruimte te geven om hun eigen stijlen toe te voegen zonder het hoofdbestand te wijzigen. (Merk echter op dat custom.css style.css niet volledig vervangt, alleen die regels die specifiek zijn overschreven, zullen worden vervangen.)
Alles hierboven is alleen van toepassing als u bij elke selector hetzelfde gewicht gebruikt. Als u ID's, klassen of stapelelementen opgeeft, geeft u ze gewicht en dat is specificiteit.
Er zijn vier categorieën die het specificiteitsniveau van een selector bepalen: inline stijlen (deze worden soms gebruikt door javascript), ID's, Klassen en elementen. Hoe de specificiteit te meten? Specificiteit wordt gemeten in punten, waarbij de hoogste puntenwaarde wordt toegepast.
Dit wetende, als je een selector als volgt gebruikt:
#content .sidebar .module li aHet totale gewicht is 122 punten (100 + 10 + 10 + 1 +1), wat een ID, twee klassen en twee elementen is.
ul li a {color: red;}Deze selector heeft een gewicht van 3, wat betekent dat alleen door een klasse ergens anders toe te voegen, je deze kunt overschrijven.
.content #sidebar {width: 30%;}Deze selector heeft een gewicht van 110 punten, voornamelijk vanwege de ID die 100 punten van het totaal van 110 optelt.
.post p:first-letter {font-size: 16px;}Deze selector heeft een gewicht van 12 punten, omdat het pseudo-element: de eerste letter weegt slechts 1 punt en dat geldt ook voor de p-tag.
p {font-family: Helvetica, arial, sans-serif;}Deze selector weegt slechts 1 punt, dit type selector moet bovenaan de pagina worden gebruikt wanneer u de basisstijlen markeert die later kunnen worden opgeheven voor specifieke gebieden.
Houd er altijd rekening mee dat voor het overschrijven van een ID-selector, je 256 klassen voor hetzelfde element moet schrijven, zoals:
#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}Alleen op deze manier zal de tweede selector degene verslaan die de ID gebruikt.
Specificiteit is geen flitsend aspect van CSS, maar naar mijn mening is dit het gebied dat het meest over het hoofd wordt gezien. Door je specifieke eigenschappen te verbeteren, kun je niet alleen bugs vermijden, maar het versnelt ook je ontwikkeling en je uiteindelijke site.
Gebruik je ID's te vaak bij het schrijven van CSS? Val je ooit terug, belangrijk? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, precisie afbeelding via Shutterstock.