Om du planerar att använda CSS regelbundet behöver du utveckla en förståelse för vad specificitet är och hur den tillämpas.
Annat än floats och positioner kan specificitet vara en av de svåraste sakerna att vänja sig, än mindre behärska. De väljare du använder i din CSS har alla olika vikter och de styrs av specificitet. Det är därför som ibland, när du tillämpar en regel på ett element, reflekteras det inte i din design.
Om du någonsin har åberopat det frysta viktiga sökordet för att hacka din CSS, så är den här artikeln för dig.
För att få din grundval solid måste du veta hur webbläsaren faktiskt läser CSS och hur reglerna överstyrs.
För det första läser webbläsaren ett stilark från topp till botten vilket innebär att med den här koden:
/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}Regeln som du angav i rad 10 kommer att överskridas och att ankaretiketten blir blå eftersom webbläsaren kommer att överväga regler längre ner i din CSS för att hålla en högre prioritet.
Detta fungerar också med den faktiska beställningen du importerar dina css-filer, till exempel:
Sedan du placerat custom.css efter stilen.css allt du skriver i style.css (diskontering för nu, väljarens vikt) kommer att överskridas och ersättas med vad som är i custom.css, används denna teknik ofta av temaproducenter att ge användaren utrymme att lägga till egna stilar utan att ändra huvudfilen. (Observera dock att custom.css inte ersätter style.css helt, bara de regler som överstyrs specifikt kommer att ersättas.)
Allt ovan gäller endast om du använder samma vikt på varje väljare. Om du specificerar ID, klasser eller staplingselement ger du dem vikt, och det är specificitet.
Det finns fyra kategorier som definierar specificitetsnivån för en väljare: inline-stilar (dessa används ibland av javascript), ID, klasser och element. Hur mäta specificitet? Specificitet mäts i punkter, med det högsta poängvärdet som tillämpas.
Att veta detta, om du använder en väljare som så:
#content .sidebar .module li aDen totala vikten är 122 poäng (100 + 10 + 10 + 1 +1), vilket är ett ID, två klasser och två element.
ul li a {color: red;}Den här väljaren kommer att hålla en vikt av 3, vilket innebär att bara genom att lägga till en klass någon annanstans kan du åsidosätta den.
.content #sidebar {width: 30%;}Denna väljare har en vikt på 110 poäng, främst på grund av det ID som lägger till 100 poäng av 110 totalt.
.post p:first-letter {font-size: 16px;}Denna väljare har en vikt på 12 poäng, eftersom pseudo-elementet: första bokstaven endast väger 1 poäng och det gör p-taggen.
p {font-family: Helvetica, arial, sans-serif;}Den här väljaren väger bara 1 poäng. Den här typen av väljare bör användas överst på sidan när du markerar de grundläggande stilar som senare kan överdrivas för specifika områden.
Tänk alltid på att för att åsidosätta en ID-väljare måste du skriva 256 klasser för samma element, som så:
#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}Endast detta sätt kommer den andra väljaren att slå den som använder ID.
Specificitet är inte en prickig aspekt av CSS, men enligt min mening är det det mest förbisedda området. Att få din specificitet rätt hjälper inte bara dig att undvika buggar, men det kommer att påskynda både din utveckling och din slutliga webbplats.
Överdriver du ID när du skriver CSS? Faller du någonsin tillbaka! Viktigt? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, precisionsbild via Shutterstock.