CSS, oppure Fogli di stile, sono il modo accettato dall'industria del web design per aggiungere stili visivi a un sito. Con i CSS, puoi controllare il layout della pagina, i colori, tipografia, immagine di sfondo e molto altro. Fondamentalmente, se si tratta di uno stile visivo, allora i CSS sono il modo per portare quegli stili sul tuo sito web.
Quando aggiungi stili CSS a un documento, potresti notare che il documento inizia a diventare sempre più lungo. Anche un piccolo sito con solo una manciata di pagine può finire con un file CSS considerevole - e un sito molto grande con un sacco di pagine di contenuto unico può avere file CSS molto grandi. Questo è aggravato da siti reattivi che hanno un sacco di query multimediali media incluso nei fogli di stile per modificare l'aspetto della grafica e il layout della pagina per le diverse schermate.
Sì, i file CSS possono diventare lunghi. Questo non è un grosso problema quando si tratta di prestazioni del sito e velocità di download, perché è probabile che anche un lungo file CSS sia piuttosto piccolo (dato che in realtà è solo un documento di testo). Tuttavia, ogni piccolo dettaglio conta quando si tratta di velocità della pagina, quindi se puoi rendere il tuo foglio di stile più snello, questa è una buona idea. È qui che la "virgola" può tornare molto utile nel tuo foglio di stile!
Virgole e CSS
Potresti esserti chiesto quale ruolo gioca la virgola nella sintassi del selettore CSS. Come nelle frasi, la virgola porta chiarezza, non codice, ai separatori. La virgola in a Selettore CSS separa più selettori all'interno degli stessi stili.
Ad esempio, diamo un'occhiata ad alcuni CSS di seguito.
th { colore: rosso; }
td { colore: rosso; }
p.rosso { colore: rosso; }
div#firstred { color: red; }
Con questa sintassi, stai dicendo che vuoi questo tag, td tag, tag di paragrafo con la classe rosso e il tag div con l'ID firstred tutto per avere lo stile di colore rosso.
Questo è un CSS perfettamente accettabile, ma ci sono due svantaggi significativi nello scriverlo in questo modo:
- In futuro, se deciderai di cambiare il colore del carattere di queste proprietà in blu, devi apportare quella modifica quattro volte nel tuo foglio di stile.
- Aggiunge molti caratteri extra al tuo foglio di stile che non ti servono. Questi 4 stili potrebbero non sembrare eccessivi, ma se continui a farlo sull'intero foglio di stile, le linee si sommeranno e quel foglio sarà molto, molto più grande di quanto dovrebbe essere.
Per evitare questi inconvenienti e per semplificare il file CSS, proveremo a utilizzare le virgole.
Usare le virgole per separare i selettori
Invece di scrivere 4 selettori CSS separati e 4 regole, puoi combinare tutti questi stili in un'unica proprietà della regola separando i singoli selettori con una virgola. Ecco come sarebbe fatto:
th, td, p.red, div#firstred { color: red; }
Il carattere virgola agisce fondamentalmente come la parola "o" all'interno del selettore. Quindi questo vale per questo tag O td tag O tag di paragrafo con la classe red OPPURE il tag div con l'ID firstred. Questo è esattamente quello che avevamo prima, ma invece di aver bisogno di 4 regole CSS, abbiamo una singola regola con più selettori. Questo è ciò che fa la virgola nel selettore, ci permette di avere più selettori in una regola.
Questo approccio non solo rende i file CSS più snelli e puliti, ma rende anche gli aggiornamenti futuri molto più semplici. Ora, se vuoi cambiare il colore da rosso a blu, devi solo fare la modifica in una posizione invece che attraverso le 4 regole di stile originali che avevamo! Pensa a questi risparmi di tempo su un intero file CSS e puoi vedere come questo ti farà risparmiare tempo e spazio a lungo termine!
Variazione della sintassi
Alcune persone scelgono di rendere il CSS più leggibile separando ogni selettore su una propria riga, invece di scriverlo tutto su una riga come sopra. Ecco come sarebbe fatto:
th,
td,
p.rosso,
div#firstred
{
colore rosso;
}
Si noti che si inserisce una virgola dopo ogni selettore e quindi si utilizza "invio" per suddividere il selettore successivo su una propria riga. NON aggiungere una virgola dopo il selettore finale.
Usando le virgole tra i tuoi selettori, crei un altro foglio di stile compatto è più facile da aggiornare in futuro ed è più facile da leggere oggi!