Ghidul pentru începători pentru specificitatea CSS

Ați încercat vreodată să anulați o regulă CSS, doar pentru a constata că nu funcționează așa cum ar trebui? Sau observat când un element este vizat de mai multe ori cu diferite combinații de selectoare CSS, se aplică o singură regulă la un moment dat? Acest lucru se datorează regulilor de specificitate CSS.

Regulile de specificitate CSS pot fi unul dintre cele mai confuze concepte de înțeles, în special pentru începători.

Dacă abia începi cu CSS, ca regulă de comandă standard, ai putea crede că cea mai recentă regulă CSS ar trebui să o înlocuiască pe cea veche. Pare simplu, dar nu merge întotdeauna așa. Depinde de specificul CSS, când și ce regula CSS ar trebui să se aplice.

Deci, să dezvăluim ce este specificul CSS și cum să o folosim eficient.

Ce este specificitatea în CSS?

Cu cuvinte simple, dacă aveți mai mulți selectori CSS pentru un element, se va aplica cel cu valoarea specifică mai mare.

Diferiți selectori au ponderi diferite și browserul va decide care dintre ele este cel mai relevant pentru acel element.

Cum functioneazã?

Specificitatea unui selector poate fi clasificată în următoarele patru niveluri:

1. Stil inline sau CSS
2. ID-uri
3. Clase, pseudoclase și atribute
4. Elemente sau pseudo-elemente

Stilurile inline sau CSS , unde CSS este aplicat direct pe documentul HTML, arată astfel <p> . Stilurile inline vor avea întotdeauna cel mai înalt nivel de specificitate.

Al doilea în această ordine sunt ID-urile , cum ar fi #content . Deci, orice selector care folosește un ID va avea al doilea nivel de specificitate cel mai înalt.

Clasele , pseudo-clasele și atributele sunt al treilea în această ordine. Acestea arată astfel: .post , :hover , și respectiv [title] .

Elementele și pseudo-elementele au cea mai mică valoare. li și :after sunt exemple de bază ale unui element și pseudo-element.

Calculul

Valoarea specificității poate fi calculată cu următorul ghid:

• Stil inline sau CSS: 1,0,0,0
• ID: 0,1,0,0
• Clasa sau pseudo-clasa si atribut: 0,0,1,0
• Elemente și pseudo-elemente: 0,0,0,1
• Selector universal (*): 0

Pentru a verifica nivelul de specificitate al selectorului, puteți utiliza calculatorul de specificitate.

Reguli de bază ale specificității CSS

Acum că aveți o idee despre cum este organizată specificul, să discutăm câteva reguli generale și exemple!

Acesta este HTML de bază pe care îl voi folosi în exemplele mele. Aici am o mică listă într-un container cu #content .

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Regula 1

Dacă aveți doi sau mai mulți selectori identici pentru un element, toți vor avea aceeași valoare de specificitate, deci se va aplica cel mai mic sau ultimul.

În următorul fragment CSS, ambele selectoare au o specificitate egală, deci culoarea li va fi galbenă, deoarece este plasată mai jos pe linie.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Regula 2

Dacă se folosesc mai multe selectoare pentru un element, se va aplica selectorul cu valoarea specifică mai mare.

În exemplul următor, li este vizat de doi selectori diferiți și ambii afectează culoarea fontului. Deci, ce regulă ar trebui să se aplice?

Ca și exemplul precedent, în conceptul de ordine CSS ar trebui să se aplice al doilea (deci culoarea li ar fi verde), dar deoarece .list li are o valoare de specificitate mai mare decât ul li , culoarea va rămâne roșie.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Regula 3

Am văzut că clasa depășește elementele la nivel de specificitate, acum să vedem ce se întâmplă cu un ID.

În exemplul următor, avem o clasă și un ID care vizează ambele același element și afectează culoarea fontului. Din nou aceeași întrebare: ce regulă ar trebui să se aplice?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

După cum am menționat anterior, ID-ul are o valoare de specificitate mai mare decât clasa, atributele și elementele, deci culoarea va fi albastră. Întotdeauna vizați ID-ul pentru un nivel de specificitate mai ridicat.

Regula 4

!important va suprascrie orice selector al oricărei valori de specificitate. Dar rețineți că !important nu ar trebui să fie suprautilizat, deoarece nu este considerată o bună practică CSS.

Dacă sunteți autorul CSS-ului dvs. și nu suprascrieți o regulă existentă, cu greu ar trebui să utilizați !important .

Utilizați !important numai atunci când încercați să suprascrieți CSS-ul altcuiva și specificul dvs. nu poate depăși selectorul anterior, mai ales când nu puteți controla ordinea de plasare a CSS-ului dvs. în HTML.

Acest lucru se va întâmpla mai ales în timp ce lucrați în WordPress, unde veți găsi multe fișiere CSS deja adăugate de diferite plugin-uri și teme.

În general, pluginul CSS este specific pluginului și utilizează ID-uri, inline-css sau chiar !important pentru o specificitate mai mare, pentru a evita orice conflict CSS. Pentru a suprascrie acel CSS, trebuie să utilizați o specificitate și mai mare; pentru aceste scenarii se poate folosi !important .

În exemplul următor, recreez scenariile anterioare, cu li țintit cu diferiți selectori CSS, dar puteți vedea că !important suprascrie toate regulile și culoarea va fi galbenă.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important vă va oferi puterea de a vă impune CSS peste orice nivel de specificitate.

Trebuie să fiți atenți când utilizați !important pentru că nu puteți trece peste această regulă. Singura modalitate de a înlocui un !important este să utilizați un alt !important mai târziu în CSS, astfel încât CSS-ul dvs. să arate cu ușurință dezordonat dacă nu înțelegeți puterea acestuia.

Câteva excepții

Elementele și pseudoelementele au cea mai mică specificitate, dar există câteva excepții interesante (și ușor confuze!). (Confuz pentru că par să nu respecte regulile pe care tocmai le-am văzut.)

În acest exemplu, veți vedea :first-child (pseudo-clasă) și :first-line (pseudo-element). Tocmai am aflat că pseudo-clasele vor avea o specificitate mai mare decât pseudo-elementele, așa că, în conformitate cu aceasta, culoarea primei linii a paragrafului ar trebui să fie verde, dar în schimb va fi roz.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

Poate credeți că comanda ar fi o problemă aici, dar chiar și schimbarea comenzii nu va schimba rezultatul. Calculatorul de specificitate arată o imagine diferită de rezultatul.

Aici specificitatea devine puțin confuză. Pot doar să presupun că motivul pentru acest rezultat este :first-line este mai aproape de element și, probabil, este tratată ca stil inline. Puteți verifica jsfiddle pentru un alt exemplu.

Cum să folosiți eficient specificitatea?

Dacă înțelegeți regulile de specificitate CSS, le puteți utiliza foarte eficient și puteți face CSS-ul reutilizabil.

Să presupunem că doriți să utilizați același .button , dar cu culori de fundal diferite, așa că configurați un anumit selector: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

Dacă .button este împachetat într-un container .red-block , atunci culoarea implicită de fundal a butonului se va schimba în roșu.

Specificul CSS este foarte util atunci când personalizați temele WordPress, unde încercați să înlocuiți CSS-ul autorului temei cu al dvs.

Greșeli frecvente de evitat

Unii oameni folosesc selectoare ultraspecifice, ceea ce nu este o practică bună. Fiți atât de specific cât este necesar. De exemplu, acest fragment de cod vizează li , dar este prea specific.

 [css] div#content ul.list li{ color: purple; } [/css]

Dacă sunteți prea specific cu CSS-ul dvs., acesta va deveni rigid și mai greu de reutilizat. Puteți scrie cu ușurință .list li în loc de div#content ul.list li , ceea ce vă va face CSS mai curat.

Resurse aditionale

• W3 org despre specificitate
• Calculator de specificitate CSS
• IE Bug
• IE Hack

Concluzie

După cum puteți vedea, specificul CSS este un instrument important și fiecare dezvoltator front-end ar trebui să îl aibă în setul de instrumente. O înțelegere clară a acestui concept poate ajuta în mare măsură să vă faceți un bun dezvoltator front-end.