Kode

Slik bruker du CSS-spesifisitet

Hvis du planlegger å bruke CSS regelmessig, må du utvikle en forståelse av hva spesifisitet er og hvordan det brukes.

Annet enn flyt og stillinger, kan spesifisitet være en av de vanskeligste tingene å bli vant til, enn si mestre. Seleksjonene du bruker i ditt CSS har alle forskjellige vekt og de styres av spesifisitet. Det er derfor noen ganger, når du bruker en regel til et element, reflekteres det ikke i designet.

Hvis du noen gang har stått på det fryktede viktige søkeordet for å hacke ditt CSS, så er denne artikkelen for deg.

Hvordan en nettleser leser CSS

For å få grunnlaget solid, må du vite hvordan nettleseren faktisk leser CSS og hvordan regler blir overstyrt.

For det første leser leseren et stilark fra topp til bunn og betyr at med denne koden: 

/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}

Regelen du angav i linje 10 vil bli overstyrt, og at ankeretiketten vil bli blå fordi nettleseren vil vurdere regler lenger ned i CSS for å holde en høyere prioritet.

Dette fungerer også med den faktiske bestillingen du importerer dine css-filer, for eksempel:

Siden du plasserte custom.css etter stilen.css alt du skriver i stilen.css (rabatt for nå, vekten av selektorer) vil bli overstyrt og erstattet for hva som er i custom.css, er denne teknikken ofte brukt av temaopphavsmenn å gi brukeren plass til å legge til egne stiler uten å endre hovedfilen. (Merk imidlertid at custom.css ikke erstatter style.css helt, bare de reglene som er spesielt overstyrt, vil bli erstattet.)

spesifisitet

Alt over gjelder bare hvis du bruker samme vekt på hver velger. Hvis du spesifiserer IDer, klasser eller stablingselementer, gir du dem vekt, og det er spesifisitet.

Det finnes fire kategorier som definerer spesifisitetsnivået til en väljare: inline-stiler (disse brukes noen ganger av javascript), ID-er, klasser og elementer. Hvordan måle spesifisitet? Specificitet er målt i poeng, med den høyeste poengverdien som blir brukt.

  • ID er verdt 100 poeng.
  • Klasser er verdt 10 poeng.
  • Elementer er verdt 1 poeng.

Å vite dette, hvis du bruker en velger slik: 

#content .sidebar .module li a

Totalvekten er 122 poeng (100 + 10 + 10 + 1 +1), som er en ID, to klasser og to elementer.

Ting å huske

  • ID-er har alt for mye vekt i forhold til klasser og elementer, slik at du bør begrense bruken av ID-er i stilarkene dine til det minste minimum.
  • I tilfeller der seleksjonene har samme vekt, blir rekkefølgen de vises tilbake, sistnevnte har høyere prioritet.
  • Stiler innebygd i HTML-trompestiler i stilark, fordi de er nærmere elementet.
  • Den eneste måten å overstyre inline-stiler er å bruke! Viktige utsagnet.
  • Pseudoklasser og attributter har samme vekt som vanlige klasser.
  • Pseudo-elementer har også samme vekt som et normalt element.
  • Universellvelgeren (*) har ingen vekt.

eksempler 

ul li a {color: red;}

Denne velgeren vil holde en vekt på 3, noe som betyr at bare ved å legge til en klasse et annet sted, kan du overstyre det. 

.content #sidebar {width: 30%;}

Denne väljeren har en vekt på 110 poeng, hovedsakelig på grunn av ID-en som legger til 100 poeng av de 110 totalt. 

.post p:first-letter {font-size: 16px;}

Denne velgeren har en vekt på 12 poeng, siden pseudo-elementet: første bokstav veier bare 1 poeng, og det gjør også p-merket. 

p {font-family: Helvetica, arial, sans-serif;}

Denne vekselen veier bare 1 poeng. Denne typen velger skal brukes øverst på siden når du merker de grunnleggende stilene som senere kan overstyres for bestemte områder.

Vær alltid oppmerksom på at for å overstyre en ID-velger må du skrive 256 klasser for samme element, slik som: 

#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}

Bare denne måten vil den andre velgeren slå den som bruker IDen.

Konklusjon

Specificitet er ikke et prangende aspekt av CSS, men etter min mening er det det mest oversett området. Å få din spesifisitet rett hjelper ikke bare deg med å unngå bugs, men det vil øke hastigheten på både din utvikling og ditt siste nettsted.

Har du overbruk IDer når du skriver CSS? Finner du noen gang igjen? Viktig? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, presisjonsbilde via Shutterstock.

!viktig css beste praksis css spesifisitet overordnede css regler stilark