CSS o Cascading Style Sheets sono il modo accettato dal settore del web design per aggiungere stili visivi a un sito. Con i CSS, puoi controllare il layout della pagina, i colori, la tipografia, l'immagine di sfondo e molto altro. Fondamentalmente, se si tratta di uno stile visivo, il CSS è il modo per portare quegli stili al tuo sito web.
Quando si aggiungono stili CSS a un documento, è possibile notare che il documento inizia a essere 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 contenuti unici può avere file CSS molto grandi. Questo è aggravato da siti reattivi che hanno molte query multimediali incluse nei fogli di stile per cambiare il modo in cui l'aspetto visivo e la pagina si presentano per schermi diversi.
Sì, i file CSS possono essere lunghi. Questo non è un grosso problema quando si tratta di prestazioni del sito e velocità di download, perché anche un lungo file CSS può essere piuttosto piccolo (dato che è davvero solo un documento di testo). Tuttavia, ogni piccola parte conta quando si tratta della velocità della pagina, quindi se riesci a rendere il tuo foglio di stile più snello, è una buona idea. Questo è dove la "virgola" può essere molto utile nel tuo foglio di stile!
Virgole e CSS
Potresti esserti chiesto quale ruolo funzioni la virgola nella sintassi del selettore CSS. Come nelle frasi, la virgola porta chiarezza - non il codice - ai separatori. La virgola in un selettore CSS separa più selettori all'interno degli stessi stili.
Ad esempio, diamo un'occhiata ad alcuni CSS qui sotto.
th {colore: rosso; }td {color: red; }p.red {color: red; }div # firstred {color: red; }
Con questa sintassi, stai dicendo che vuoi esimo tag, TD i tag, i tag di paragrafo con la classe rossa e il tag div con l'ID di tutto il testo per avere il colore dello stile rosso.
Questo è un CSS perfettamente accettabile, ma ci sono due svantaggi significativi nello scrivere in questo modo:
- In futuro, se decidi di cambiare il colore del carattere di queste proprietà in blu, devi apportare tale 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 ottimizzare il tuo file CSS, proveremo a usare le virgole.
Utilizzare le virgole per separare i selettori
Invece di scrivere 4 selettori CSS separati e 4 regole, puoi combinare tutti questi stili in una proprietà della regola separando i singoli selettori con una virgola. Ecco come si farebbe:
th, td, p.red, div # firstred {color: red; }
Il carattere virgola funge fondamentalmente dalla parola "e" all'interno del selettore. Quindi questo vale per th tag ANDTD tag AND tag paragrafo con la classe red AND tag div con l'ID firstred. Questo è esattamente ciò che avevamo prima, ma invece di avere 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 volevi cambiare il colore da rosso a blu, devi solo apportare la modifica in una posizione anziché 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 nella lunga runa!
Variazione della sintassi
Alcune persone scelgono di rendere più leggibile il CSS separando ciascun selettore sulla propria linea, invece di scriverlo tutto su una riga come sopra. Ecco come si farebbe:
esimo,TD,p.red,div # firstred{colore rosso;}
Si noti che si posiziona una virgola dopo ciascun selettore e quindi si utilizza "enter" per interrompere il successivo selettore sulla propria riga. NON aggiungi una virgola dopo il selettore finale.
Usando le virgole tra i selettori, crei un foglio di stile più compatto che è più facile da aggiornare in futuro e che è più facile da leggere oggi!
Articolo originale di Jennifer Krynin. Modificato da Jeremy Girard il 5/8/17
