Kode

Sådan bruger du CSS-specificitet

Hvis du planlægger at bruge CSS regelmæssigt, skal du udvikle en forståelse af, hvad specificitet er, og hvordan den anvendes.

Bortset fra floats og positioner, kan specificitet være en af ​​de sværeste ting at vænne sig til, endsige mester. De selektorer, du bruger i dit CSS, har alle forskellige vægte, og de styres af specificitet. Derfor er det nogle gange, når du bruger en regel til et element, det ikke afspejles i dit design.

Hvis du nogensinde har stolt på det frygtelige vigtige søgeord til at hack dit CSS, så er denne artikel til dig.

Hvordan en browser læser CSS

For at få dine fundamenter solid, skal du vide, hvordan browseren rent faktisk læser CSS og hvordan regler overstyres.

For det første læser browseren et stylesheet fra top til bund, hvilket betyder at med denne kode: 

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

Reglen, du angav i linje 10, bliver overskredet, og at ankeretiketten bliver blå, fordi browseren vil overveje regler længere nede i din CSS for at have større prioritet.

Dette virker også med den egentlige rækkefølge, du importerer dine css-filer, for eksempel:

Siden du har placeret custom.css efter stilen.css, hvad som helst du skriver i stilen.css (diskontering for nu vil vægten af ​​selektorer) blive overskredet og erstattet af hvad der er i custom.css, bruges denne teknik ofte af tema skabere at give brugeren noget plads til at tilføje deres egne stilarter uden at ændre hovedfilen. (Bemærk dog, at custom.css ikke erstatter style.css helt, kun de regler, der er specifikt overskredet, vil blive erstattet.)

Specificitet

Alt ovenfor gælder kun, hvis du bruger samme vægt på hver vælger. Hvis du angiver id'er, klasser eller stablingselementer, giver du dem vægt, og det er specificitet.

Der er fire kategorier, der definerer specificitetsniveauet for en vælger: inline-stilarter (disse bruges nogle gange af javascript), ID'er, klasser og elementer. Hvordan måles specificitet? Specificitet måles i punkter, hvor den højeste punktværdi anvendes.

  • ID er værd 100 point.
  • Klasser er 10 point værd.
  • Elementer er værd 1 point.

At vide dette, hvis du bruger en vælger som sådan: 

#content .sidebar .module li a

Den samlede vægt er 122 point (100 + 10 + 10 + 1 +1), som er et ID, to klasser og to elementer.

Ting at huske

  • ID'er har alt for meget vægt i forhold til klasser og elementer, så du bør begrænse brugen af ​​ID'er i dine stylesheets til det absolutte minimum.
  • I tilfælde, hvor vælgerne har samme vægt, bliver den rækkefølge, de vises, vendt tilbage, idet sidstnævnte er højere prioritet.
  • Styles indlejret i dine HTML-trumpestiler i stylesheets, fordi de er tættere på elementet.
  • Den eneste måde at overstyre inline-stilarter på er at bruge den vigtige erklæring.
  • Pseudoklasser og attributter har samme vægt som normale klasser.
  • Pseudo-elementer har også samme vægt som et normalt element.
  • Universalvælgeren (*) har ingen vægt.

eksempler 

ul li a {color: red;}

Denne vælger vil rumme en vægt på 3, hvilket betyder at ved at tilføje en klasse et andet sted, kan du tilsidesætte det. 

.content #sidebar {width: 30%;}

Denne vælger har en vægt på 110 point, hovedsagelig på grund af det id, der tilføjer 100 point af de 110 samlede. 

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

Denne vælger har en vægt på 12 point, da pseudo-elementet: første bogstav kun vejer 1 point og det gør også p-mærket. 

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

Denne vælger vejer kun 1 point. Denne type vælger skal bruges øverst på siden, når du markerer de grundlæggende stilarter, som senere kan overstyres for bestemte områder.

Vær altid opmærksom på, at for at tilsidesætte en ID-vælger skal du skrive 256 klasser for det samme element, som sådan: 

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

Kun denne måde vil den anden vælger slå den ene ved hjælp af id'et.

Konklusion

Specificitet er ikke et prangende aspekt af CSS, men efter min mening er det det mest oversete område. At få din specificitet ret hjælper ikke kun dig med at undgå fejl, men det vil fremskynde både din udvikling og dit endelige websted.

Overstyrer du ID'er, når du skriver CSS? Er du nogensinde faldet tilbage! Vigtigt? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, præcision billede via Shutterstock.

!vigtig css bedste praksis css specificitet overordnede css regler stylesheets