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 veien for å bringe disse stilene til nettstedet ditt.
Når du legger til CSS-stiler i et dokument, kan du legge merke til 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 sider med unikt innhold kan ha svært store CSS-filer. Dette komprimeres av lydhør nettsteder som har mange medieforespørsler inkludert i stilarkene for å endre hvordan bildene ser ut og siden ligger ut for forskjellige skjermer.
Ja, CSS-filer kan bli lange. Dette er ikke et stort problem når det gjelder ytelse på nettstedet og nedlastingshastigheten, for selv en lang CSS-fil er sannsynligvis ganske liten (siden det egentlig bare er et tekstdokument). Likevel teller hver liten bit når det gjelder sidens hastighet, så hvis du kan gjøre stilarket ditt slankere, det er en god ide. Dette er hvor "komma" kan komme veldig bra i stilarket ditt!
Kommas og CSS
Du har kanskje lurt på hvilken rolle kommaen spiller i CSS selector-syntaks. Som i setninger bringer kommaene klarhet - ikke kode - til separatorene. Komma i en CSS-velger skiller flere selektorer i samme stiler.
For eksempel, la oss 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 tagger, avsnittetiketter med klassen rød, og div-taggen med ID-fakultetet forrest alle for å få 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 skriftfargen på disse egenskapene til blå, må du gjøre det som endres fire ganger i stilarket.
- Det legger til mange ekstra tegn til stilarket du ikke trenger. Disse 4 stilene kan ikke virke som overkill, men hvis du fortsetter å gjøre dette på tvers av hele stilarket, vil linjene legge opp og det arket vil være mye, mye større enn det må være.
For å unngå disse ulempene, og for å effektivisere CSS-filen, vil vi prøve å bruke kommaer.
Bruke kommaer til å separere selektorer
I stedet for å skrive 4 separate CSS-selektorer og 4 regler, kan du kombinere alle disse stilene til en regelegenskap ved å skille de enkelte seleksjonene med et komma. Slik er det slik:
th, td, p.red, div # firstred {farge: rød; }
Komma tegnet fungerer i utgangspunktet som ordet "og" inne i velgeren. Så dette gjelder th merker ANDtd koder og avsnittetiketter med klassen rød OG div-taggen med ID-nummeret. Det er akkurat det vi hadde før, men i stedet for å trenge 4 CSS-regler, har vi en enkelt regel med flere selektorer. Dette er hva kommaet gjør i selgeren, det tillater oss å ha flere selektorer i en regel.
Ikke bare gjør denne tilnærmingen for smidigere, renere CSS-filer, det gjør også fremtidige oppdateringer så mye enklere. Nå, hvis du vil endre fargen fra rød til blå, må du bare gjøre endringen på ett sted i stedet for over de opprinnelige 4-stjernesreglene vi hadde! Tenk på disse tidsbesparelsene over en hel CSS-fil, og du kan se hvordan dette vil spare deg både tid og plass på lang sikt!
Syntaksvariasjon
Noen velger å gjøre CSS mer leselig ved å skille hver velger på egen linje, i stedet for å skrive alt på en linje som ovenfor. Slik gjøres det:
th,td,p.red,div # firstred{fargen rød;}
Legg merke til at du legger et komma etter hver velger og deretter bruk "enter" for å bryte neste velger til sin egen linje. Du legger IKKE til et komma etter den endelige valgeren.
Ved å bruke komma mellom valgene dine, lager du et mer kompakt stilark som er enklere å oppdatere i fremtiden, og det er enklere å lese i dag!
Opprinnelig artikkel av Jennifer Krynin. Redigert av Jeremy Girard den 5/8/17
