CSS eller Cascading Style Sheets er webdesignindustriens accepterede måde at tilføje visuelle stilarter til et websted. Med CSS kan du styre sidelayout, farver, typografi, baggrundsbillede og meget mere. I grund og grund, hvis det er en visuel stil, så er CSS den måde at bringe disse stilarter til din hjemmeside.
Når du tilføjer CSS-stilarter til et dokument, kan du bemærke, at dokumentet begynder at blive længere og længere. Selv et lille websted med kun en håndfuld sider kan ende med en betydelig CSS-fil - og et meget stort websted med masser af sider af unikt indhold kan have meget store CSS-filer. Dette forstærkes af lydhøre websteder, der har masser af medieforespørgsler, der er inkluderet i stilarkene, for at ændre hvordan billederne ser ud, og siden ligger ud for forskellige skærmbilleder.
Ja, CSS-filer kan blive lange. Dette er ikke et stort problem, når det kommer til ydeevne og downloadhastighed, fordi selv en lang CSS-fil sandsynligvis vil være temmelig lille (da det virkelig er et tekstdokument). Alligevel tæller hver lille smule, når det kommer til sidens hastighed, så hvis du kan gøre din stilark mere slank, er det en god idé. Det er her, hvor "komma" kan komme meget praktisk i dit stilark!
Kommas og CSS
Du har måske spekuleret på, hvilken rolle kommaen spiller i CSS selector-syntaks. Som sætninger bringer kommaene klarhed - ikke kode - til separatorerne. Komma i en CSS-vælger adskiller flere selektorer inden for samme stilarter.
For eksempel, lad os se på nogle CSS nedenfor.
th {farve: rød; }td {farve: rød; }p.red {farve: rød; }div # firstred {farve: rød; }
Med denne syntaks siger du, at du vil have th tags, TD tags, afsnit tags med klassen rød, og div-mærket med ID'en fortrylles alle for at have stilfarven rød.
Dette er helt acceptabelt CSS, men der er to betydelige ulemper ved at skrive det på denne måde:
- I fremtiden, hvis du beslutter at ændre skriftfarven på disse egenskaber til blå, skal du ændre den fire gange i stilarket.
- Det tilføjer mange ekstra figurer til dit stilark, som du ikke har brug for. Disse 4 stilarter kan ikke virke som overkill, men hvis du fortsætter med at gøre dette på tværs af hele dit stilark, vil linjerne tilføje op, og det ark vil være meget, meget større end det skal være.
For at undgå disse ulemper, og for at strømline din CSS-fil, vil vi forsøge at bruge kommaer.
Brug kommaer til separate selektorer
I stedet for at skrive 4 separate CSS-selektorer og 4 regler, kan du kombinere alle disse stilarter i en regelegenskab ved at adskille de enkelte selektorer med et komma. Her er, hvordan det ville ske:
th, td, p.red, div # firstred {farve: rød; }
Kommastikken virker i grunden som ordet "og" inde i vælgeren. Så gælder dette for th mærker ANDTD tags og afsnit mærker med klassen rød OG div tag med ID firstred. Det er præcis det, vi havde før, men i stedet for at have brug for 4 CSS-regler har vi en enkelt regel med flere selektorer. Dette er, hvad kommaet i vælgeren gør det muligt for os at have flere selektorer i en regel.
Denne tilgang gør ikke kun lempere, renere CSS-filer, det gør også fremtidige opdateringer så meget lettere. Nu, hvis du ønskede at ændre farven fra rød til blå, skal du kun foretage ændringen på et sted i stedet for på tværs af de originale 4-stjernede regler vi havde! Tænk på disse tidsbesparelser på tværs af en hel CSS-fil, og du kan se, hvordan dette sparer både tid og rum på lang sigt!
Syntaksvariation
Nogle vælger at gøre CSS mere læselig ved at adskille hver vælger på sin egen linje, i stedet for at skrive det hele på en linje som ovenfor. Sådan gøres det:
th,td,p.red,div # firstred{farve: rød;}
Bemærk, at du placerer et komma efter hver vælger og derefter bruger "enter" for at bryde den næste vælger på sin egen linje. Du tilføjer IKKE et komma efter den endelige vælger.
Ved at bruge kommaer mellem dine selektorer, opretter du et mere kompakt stilark, der er lettere at opdatere i fremtiden, og det er lettere at læse i dag!
Originalartikel af Jennifer Krynin. Redigeret af Jeremy Girard den 5/8/17
