Se si prevede di utilizzare i CSS regolarmente, è necessario sviluppare una comprensione di che cos'è la specificità e in che modo viene applicata.
A parte i galleggianti e le posizioni, la specificità può essere una delle cose più difficili da abituare, per non parlare del padrone. I selettori che utilizzi nel tuo CSS hanno tutti pesi diversi e quelli sono controllati dalla specificità. Ecco perché a volte, quando si applica una regola a un elemento, non si riflette nel progetto.
Se ti sei mai affidato alla temuta parola chiave importante per hackerare il tuo CSS, allora questo articolo fa per te.
Per ottenere solide fondamenta, è necessario sapere come il browser legge effettivamente i CSS e come le regole vengono ignorate.
In primo luogo il browser leggerà un foglio di stile dall'alto verso il basso, il che significa che con questo codice:
/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}La regola che hai specificato alla riga 10 verrà ignorata e il tag di ancoraggio sarà blu perché il browser considererà le regole più avanti nel tuo CSS per mantenere una priorità maggiore.
Questo funziona anche con l'ordine effettivo con cui si importano i file css, ad esempio:
Dal momento che hai inserito custom.css dopo che lo style.css che hai scritto in style.css (attualizzando per ora il peso dei selettori) verrà sovrascritto e sostituito da quello che si trova in custom.css, questa tecnica viene spesso utilizzata dai creatori di temi per dare all'utente spazio per aggiungere i propri stili senza modificare il file principale. (Nota comunque che custom.css non sostituisce interamente style.css, solo le regole che sono state sovrascritte saranno sostituite).
Tutto sopra vale solo se si utilizza lo stesso peso su ogni selettore. Se stai specificando ID, classi o elementi di impilamento, allora stai dando loro peso, e questa è specificità.
Esistono quattro categorie che definiscono il livello di specificità di un selettore: stili in linea (a volte utilizzati da javascript), ID, Classi ed elementi. Come misurare la specificità? La specificità è misurata in punti, con il valore di punti più alto applicato.
Sapendo questo, se si utilizza un selettore in questo modo:
#content .sidebar .module li aIl suo peso totale è di 122 punti (100 + 10 + 10 + 1 +1), che è un ID, due classi e due elementi.
ul li a {color: red;}Questo selettore avrà un peso di 3, il che significa che semplicemente aggiungendo una classe da qualche altra parte, puoi sovrascriverla.
.content #sidebar {width: 30%;}Questo selettore ha un peso di 110 punti principalmente a causa dell'ID che aggiunge 100 punti del totale 110.
.post p:first-letter {font-size: 16px;}Questo selettore ha un peso di 12 punti, poiché lo pseudo-elemento: la prima lettera pesa solo 1 punto e così pure il tag p.
p {font-family: Helvetica, arial, sans-serif;}Questo selettore pesa solo 1 punto, questo tipo di selettore dovrebbe essere utilizzato nella parte superiore della pagina quando si contrassegnano gli stili di base che in seguito potrebbero essere sostituiti per aree specifiche.
Ricorda sempre che per sovrascrivere un selettore ID devi scrivere 256 classi per lo stesso elemento, in questo modo:
#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}Solo in questo modo il secondo selettore batte quello usando l'ID.
La specificità non è un aspetto appariscente dei CSS, ma a mio parere è l'area più trascurata. Ottenere la tua specificità non solo ti aiuta a evitare i bug, ma accelera sia lo sviluppo che il sito finale.
Sovrascrivi gli ID quando scrivi CSS? Ti ricolleghi mai! Importante? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di precisione via Shutterstock.