Uno dei modi migliori per imparare a codificare i siti Web è guardare il codici sorgente di altri siti. Questa pratica è il modo in cui molti professionisti del web hanno imparato il loro mestiere, specialmente nei giorni prima che ci fossero così tante opzioni per web design corsi, libri e siti di formazione online.
Se provi questa pratica e guardi i fogli di stile a cascata di un sito, una cosa che potresti vedere in quel codice è una riga che dice !importante. Questo termine cambia la priorità di elaborazione all'interno del foglio di stile.
La cascata dei CSS
I fogli di stile a cascata lo fanno davvero cascata, nel senso che sono posizionati in un ordine particolare. In generale, gli stili vengono applicati nell'ordine in cui vengono letti dal browser. Viene applicato il primo stile, quindi il secondo e così via.
Di conseguenza, se uno stile appare nella parte superiore di un foglio di stile e quindi viene modificato nella parte inferiore del documento, la seconda istanza di quello stile è quella applicata nelle istanze successive, non la prima. Fondamentalmente, se due stili dicono la stessa cosa (il che significa che hanno lo stesso livello di specificità), verrà utilizzato l'ultimo elencato.
Ad esempio, immaginiamo che i seguenti stili fossero contenuti in un foglio di stile. Il testo del paragrafo verrebbe visualizzato in nero, anche se la prima proprietà di stile applicata è rossa. Questo perché il valore "nero" è elencato per secondo. Poiché il CSS viene letto dall'alto verso il basso, lo stile finale è "nero" e quindi vince quello.
p { colore: rosso; }
p { colore: nero; }
Quanto !importante cambia la priorità
Il !importante La direttiva influenza il modo in cui il tuo CSS si sovrappone mentre segui le regole che ritieni più cruciali e che dovrebbero essere applicate. Una regola che ha questa direttiva viene sempre applicata, indipendentemente da dove appare quella regola nel documento CSS.
Per rendere il testo del paragrafo sempre rosso, dall'esempio precedente, cambia lo stile come segue:
p { colore: rosso !importante; }
p { colore: nero; }
Ora tutto il testo apparirà in rosso, anche se il valore "nero" è elencato per secondo. La direttiva !important sovrascrive le normali regole della cascata e conferisce a quello stile una specificità molto elevata.
Se hai assolutamente bisogno che i paragrafi appaiano in rosso, questo stile lo farebbe, ma ciò non significa che questa sia una buona pratica.
Quando usare !important
La direttiva !important è 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 conflitto di specificità, aggiungi la dichiarazione !important al tuo style per vedere se questo lo risolve e, in tal caso, cambia l'ordine dei selettori e rimuovi le direttive !important dalla tua produzione codice.
Se ti affidi troppo alla dichiarazione !important per ottenere gli stili desiderati, alla fine avrai un foglio di stile disseminato di stili !important. Cambierai radicalmente il modo in cui viene elaborato il CSS di quella pagina. È una pratica pigra che non va bene dal punto di vista della gestione a lungo termine.
Usa !important per i test o, in alcuni casi, quando devi assolutamente sovrascrivere uno stile in linea che fa parte di un tema o di un framework di modelli. Anche in quei casi, usa questo approccio con parsimonia e scrivi invece fogli di stile puliti che onorano il cascata.
Fogli di stile utente
Questa direttiva è stata anche messa in atto per aiutare gli utenti delle pagine web a gestire i fogli di stile che rendono le pagine difficili da usare o leggere.
quando qualcuno definisce un foglio di stile per visualizzare le pagine web, quel foglio di stile viene annullato dal foglio di stile dell'autore della pagina. Se l'utente contrassegna uno stile come !important, quello stile prevale sul foglio di stile dell'autore della pagina web, anche se l'autore contrassegna una regola come !important.
Questa gerarchia è utile per gli utenti che hanno bisogno di impostare gli stili in un certo modo. Ad esempio, un lettore ipovedente potrebbe dover aumentare le dimensioni dei caratteri predefinite su tutte le pagine Web che utilizza. Usando la tua direttiva !important con parsimonia all'interno delle pagine che crei, soddisfi le esigenze uniche dei tuoi lettori.