Uno dei modi migliori per imparare a codificare i siti Web è guardare i codici sorgente di altri siti. Questa pratica è il numero di professionisti del web che hanno imparato il loro mestiere, specialmente nei giorni precedenti c'erano così tante opzioni per corsi di web design, libri e siti di formazione online.
Se provi questa pratica e guardi i fogli di stile CSS (CSS) di un sito, una cosa che potresti vedere in quel codice è una linea che dice! Importante. Che cosa significa e, altrettanto importante, come si utilizza correttamente tale dichiarazione nei fogli di stile?
La cascata di CSS
Prima di tutto, è importante capire che i fogli di stile a cascata funzionano davvero cascata , nel senso che sono collocati in un ordine particolare. In generale, ciò significa che gli stili sono applicati nell'ordine in cui vengono letti dal browser. Viene applicato il primo stile e poi il secondo e così via.
Di conseguenza, se uno stile appare nella parte superiore di un foglio di stile e poi viene modificato in basso nel documento, la seconda istanza di quello stile è quella applicata nelle istanze successive, non la prima. Fondamentalmente, se due stili stanno dicendo la stessa cosa (il che significa che hanno lo stesso livello di specificità), verrà usato l'ultimo elencato.
Ad esempio, immaginiamo che i seguenti stili fossero contenuti in un foglio di stile. Il testo del paragrafo verrà visualizzato in nero, anche se la prima proprietà di stile applicata è rossa. Questo perché il valore "nero" è elencato secondo. Poiché i CSS vengono letti dall'alto verso il basso, lo stile finale è "nero" e quindi quello vince.
p {color: red; }p {colore: nero; }
Quanto! Importante cambia la priorità
Ora che capisci come queste regole quasi identiche siano elaborate dai CSS, possiamo vedere come la direttiva! Important cambia leggermente le cose.
La direttiva! Important influisce sul modo in cui il CSS si concentra mentre segue le regole che ritieni più cruciali e dovrebbe essere applicato. Una regola che ha la direttiva! Important è sempre applicata, indipendentemente da dove tale regola appare nel documento CSS.
Per rendere il testo del paragrafo sempre rosso, dall'esempio sopra, utilizzerai:
p {color: red! important; }p {colore: nero; }
Ora tutto il testo apparirà in rosso, anche se il valore "nero" è elencato secondo. La direttiva! Important sovrascrive le normali regole della cascata e conferisce a tale stile una specificità molto elevata.
Se hai assolutamente bisogno che i paragrafi appaiano rossi, questo stile lo farebbe, ma ciò non significa che questa sia una buona pratica. Diamo un'occhiata a quando potresti voler usare! Importante e quando non è appropriato.
Quando usare! Importante
La direttiva! Important è molto utile quando si esegue il test e il debug di un sito Web. Se non sei sicuro del motivo per cui uno stile non viene applicato e pensi che possa essere un problema di specificità, puoi aggiungere la dichiarazione! Important al tuo stile per vedere se lo risolve.
Se l'aggiunta di! Important risolve davvero il problema di stile, hai appena determinato che si tratta di un problema di specificità. Tuttavia, non si vuole lasciare questo importante codice, ma è stato messo lì solo a scopo di test.
Dal momento che il test è terminato, dovresti ora rimuovere quella direttiva e aggiustare il selettore per raggiungere la specificità di cui hai bisogno per far funzionare il tuo stile. ! importante non dovrebbe penetrare nei vostri siti di produzione, in parte a causa del modo in cui cambia la normale cascata.
Se ti affidi troppo alla dichiarazione importante per ottenere gli stili desiderati, alla fine avrai un foglio di stile pieno di stili importanti. Cambierà in modo sostanziale il modo in cui il CSS della pagina viene elaborato. È una pratica pigra che non va bene da un punto di vista gestionale a lungo termine.
Usa! Importante per il test o, in alcuni casi, quando devi assolutamente sostituire uno stile in linea che fa parte di un tema o di un modello. Anche in questi casi, usa questo approccio con la massima parsimonia possibile e cerca invece di scrivere fogli di stile puliti che capiscano la cascata.
Fogli di stile utente
C'è un'ultima nota sulla! Direttiva importante che è essenziale capire. Questa direttiva è stata anche implementata per aiutare gli utenti delle pagine Web a gestire i fogli di stile che rendono difficile l'uso o la lettura delle pagine.
In genere, se un utente definisce un foglio di stile per visualizzare le pagine Web, quel foglio di stile viene annullato dal foglio di stile dell'autore della pagina web. Se l'utente contrassegna uno stile come! Importante, quello stile sostituisce il foglio di stile dell'autore della pagina Web, anche se l'autore contrassegna una regola come! Importante.
Questo è utile per gli utenti che hanno bisogno di impostare gli stili in un certo modo. Ad esempio, qualcuno potrebbe aver bisogno di aumentare le dimensioni dei caratteri di default su tutte le pagine web che usano. Usando la tua! Direttiva importante con parsimonia nelle pagine che costruisci, puoi soddisfare le esigenze speciali che i tuoi utenti potrebbero avere.
