Kommarollen i CSS Selector Syntax

click fraud protection

CSS eller Cascading Style Sheets, er webdesignindustriens accepterede måde at tilføje visuelle stilarter til et websted. Med CSS kan du kontrollere sidelayout, farver, typografi, baggrundsbillede og meget mere. Dybest set, hvis det er en visuel stil, så er CSS måden at bringe disse stilarter til dit websted.

Når du føjer CSS-stilarter til et dokument, bemærker du muligvis, at dokumentet begynder at blive længere og længere. Selv et lille sted med kun en håndfuld sider kan ende med en betydelig CSS-fil - og et meget stort websted med masser af sider med unikt indhold kan have meget store CSS-filer. Dette forstærkes af lydhøre sider der har masser af medieforespørgsler inkluderet i typografiarkene for at ændre, hvordan grafikken ser ud, og siden lægger ud til forskellige skærme.

Ja, CSS-filer kan blive lange. Dette er ikke et stort problem, når det kommer til webstedsydelse og downloadhastighed, fordi selv en lang CSS-fil sandsynligvis vil være ret lille (da det egentlig kun er et tekstdokument). Stadig tæller hver lille smule, når det kommer til sidehastighed, så hvis du kan gøre dit stilark slankere, er det en god ide. Dette er hvor "kommaet" kan komme godt med i dit stilark!

instagram viewer

Kommaer og CSS

Webgrafik, der illustrerer forskellen mellem frontend- og bagendevisninger
filo / Getty Images

Du har måske spekuleret på, hvilken rolle kommaet spiller i CSS-vælgerens syntaks. Som i sætninger bringer kommaet klarhed - ikke kode - til separatorerne. Kommaet i en CSS-vælger adskiller flere vælgere inden for de samme stilarter.

Lad os for eksempel 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, afsnitskoder med klassen rød og div-koden med ID'et strammet alle for at have stilfarven rød.

Dette er helt acceptabelt CSS, men der er to væsentlige ulemper ved at skrive det på denne måde:

  • I fremtiden, hvis du beslutter at ændre skrift farve af disse egenskaber til blå, skal du foretage den ændring fire gange i dit stilark.
  • Det tilføjer mange ekstra tegn til dit stilark, som du ikke har brug for. Disse 4 stilarter virker muligvis ikke som for store, men hvis du fortsætter med at gøre dette på tværs af hele dit stilark, tilføjes linjerne, og det ark bliver meget, meget større, end det skal være.

For at undgå disse ulemper og for at strømline din CSS-fil, prøver vi at bruge kommaer.

Brug af kommaer til at adskille vælgere

I stedet for at skrive 4 separate CSS-vælgere og 4 regler kan du forene alle disse stilarter i en regelegenskab ved at adskille de enkelte vælgere med et komma. Sådan gøres det:

th, td, p.red, div # firstred {farve: rød; } 

Kommategnet fungerer grundlæggende som ordet "eller" inde i vælgeren. Så dette gælder for th tags ELLER td tags ELLER afsnit tags med klassen rød ELLER div-mærket med ID-firstred. Det var præcis, hvad vi havde før, men i stedet for at have brug for 4 CSS-regler har vi en enkelt regel med flere vælgere. Dette er, hvad kommaet gør i vælgeren, det giver os mulighed for at have flere vælgere i en regel.

Ikke kun gør denne tilgang til slankere, renere CSS-filer, det gør også fremtidige opdateringer så meget lettere. Hvis du nu vil ændre farven fra rød til blå, skal du kun foretage ændringen et sted i stedet for på tværs af de originale 4 stilregler, vi havde! Tænk på disse tidsbesparelser på tværs af en hel CSS-fil, og du kan se, hvordan dette vil spare dig både tid og plads i det lange løb!

Syntaksvariation

Nogle mennesker 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 ville det gøres:

th,
td,
p.red,
div # firstred
{
farve: rød;
}

Bemærk, at du placerer et komma efter hver vælger og derefter bruger "enter" til 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 vælgere opretter du et mere kompakt stilark det er lettere at opdatere i fremtiden, og det er lettere at læse i dag!

instagram story viewer