CSS, eller Cascading Style Sheets, er webdesignindustriens aksepterte måte å legge til visuelle stiler på et nettsted. Med CSS kan du kontrollere sidelayout, farger, typografi, bakgrunnsbilde og mye mer. I utgangspunktet, hvis det er en visuell stil, så er CSS måten å bringe disse stilene til nettstedet ditt.
Når du legger til CSS-stiler i et dokument, kan du merke at dokumentet begynner å bli lengre og lenger. Selv et lite nettsted med bare en håndfull sider kan ende opp med en betydelig CSS-fil - og et veldig stort nettsted med mange og mange sider med unikt innhold kan ha veldig store CSS-filer. Dette forsterkes av responsive nettsteder som har mange mediespørsmål inkludert i stilarkene for å endre hvordan grafikken ser ut og siden legger ut for forskjellige skjermer.
Ja, CSS-filer kan bli langvarige. Dette er ikke et stort problem når det gjelder nettstedets ytelse og nedlastingshastighet, fordi selv en lang CSS-fil sannsynligvis er ganske liten (siden den egentlig bare er et tekstdokument). Likevel teller hver eneste bit når det gjelder sidehastighet, så hvis du kan gjøre stilarket ditt slankere, er det en god ide. Det er her "kommaet" kan være veldig nyttig i stilarket ditt!
Komma og CSS
Du lurte kanskje på hvilken rolle kommaet spiller i CSS-velgerens syntaks. Som i setninger bringer kommaet klarhet - ikke kode - til skilletegnene. Kommet i en CSS-velger skiller flere velgere innenfor de samme stilene.
La oss for eksempel se på noen CSS nedenfor.
th {farge: rød; }
td {farge: rød; }
p.red {farge: rød; }
div # firstred {farge: rød; }
Med denne syntaksen sier du at du vil th koder, td koder, avsnittskoder med klassen rød, og div-koden med ID-en strammet for å ha stilfargen rød.
Dette er helt akseptabelt CSS, men det er to betydelige ulemper ved å skrive det på denne måten:
- I fremtiden, hvis du bestemmer deg for å endre skriftfarge av disse egenskapene til blå, må du gjøre den endringen fire ganger i stilarket ditt.
- Det legger til mange ekstra tegn i stilarket ditt som du ikke trenger. Disse fire stilene virker kanskje ikke som overkill, men hvis du fortsetter å gjøre dette på tvers av hele stilarket ditt, vil linjene legge seg opp, og det arket vil være mye, mye større enn det trenger å være.
For å unngå disse ulempene, og for å effektivisere CSS-filen, vil vi prøve å bruke kommaer.
Bruke kommaer for å skille velgerne
I stedet for å skrive 4 separate CSS-velgere og 4 regler, kan du kombinere alle disse stilene i en regelegenskap ved å skille de enkelte velgerne med et komma. Slik blir det gjort:
th, td, p.red, div # firstred {farge: rød; }
Kommategnet fungerer i utgangspunktet som ordet "eller" inne i velgeren. Så dette gjelder th tagger ELLER td tagger ELLER avsnittetiketter med klassen rød ELLER div-koden med ID-strengen. Det var akkurat det vi hadde før, men i stedet for å trenge 4 CSS-regler, har vi en enkelt regel med flere velgere. Dette er hva kommaet gjør i velgeren, det lar oss ha flere velgere i en regel.
Ikke bare gir denne tilnærmingen slankere, renere CSS-filer, det gjør også fremtidige oppdateringer så mye enklere. Nå hvis du ønsket å endre fargen fra rød til blå, trenger du bare å gjøre endringen på ett sted i stedet for på tvers av de originale 4 stilreglene vi hadde! Tenk på disse tidsbesparelsene på tvers av en hel CSS-fil, og du kan se hvordan dette vil spare deg for tid og plass i det lange løp!
Syntaksvariasjon
Noen mennesker velger å gjøre CSS mer leselig ved å skille hver velger på sin egen linje, i stedet for å skrive det hele på en linje som ovenfor. Dette ville blitt gjort:
th,
td,
p.red,
div # firstred
{
fargen rød;
}
Legg merke til at du legger et komma etter hver velger, og deretter bruker du "enter" for å bryte neste velger på sin egen linje. Du legger IKKE til et komma etter den endelige velgeren.
Ved å bruke komma mellom velgerne dine, lager du en mer kompakt stilark det er lettere å oppdatere i fremtiden, og det er lettere å lese i dag!