luni, 3 noiembrie 2008

CSS Specificity


Incepem cu esentialul:
De ce este importanta specificitatea in CSS?
Pentru ca proprietatile unui element html care vor fi luate in considerare vor fi acelea care au specificitatea cea mai mare.

De exemplu, avand acest code html :
<div id="principal">
<p>Interfete web in actiune!</p>
</div>

si css-ul asociat:
p{color: red} /*proprietate A*/
#principal p{color: green} /*proprietate B*/

culoarea paragrafului va fi cea verde, intrucat aceasta este cea mai specifica.

Concret, specificitatea se poate calcula astfel:
Fiecare selector se situeaza pe unul dintre aceste 4 nivele:
(1) Stiluri imbricate in codul html
de exemplu <p style="color: red;">
(2) Identificatori
de exemplu #principal
(3) Clase, atribute sau pseudo-clase
de exemplu .clasa, [atribut], :hover
(4) Elemente si pseudo-elemente
de exemplu p, :before

Putem asocia unui element X urmatoarea formula:
specificitate(X) = 1000*(1) + 100*(2) + 10*(3) + (4),
unde (niv) = numarul de selectori de pe nivelul niv.

In cazul nostru,
specificitate(proprietate A) = 1000*0 + 100*0 + 10*0 + 1 = 1,
specificitate(proprietate B) = 1000*0 + 100*1 + 10*0 + 1 = 101,

ceea ce inseamna ca a doua regula este cea mai specifica, deci ea va fi luata in considerare.
In cazul in care exista 2 proprietati cu aceiasi specificitate, va fi luata in considerare ultima propritate.

Si de ce este asa de utila specificitatea?
Poate nu se observa imediat importanta acestui mecanism, dar privind inapoi, prin analogie, este aceeasi diferenta ca intre limbajele de programare moderne si cele de la inceputuri.
Mecanismul specificitatii devine foarte comod pentru modularizarea si reutilizarea codului, iar interfata are de castigat in claritate si performanta.

Un comentariu:

Juls spunea...

chiar simpatic.
imi plac mai ales ultimele doua fraze :)) ;)