CSS, eller Cascading Style Sheets, är webbdesignindustrins accepterade sätt att lägga till visuella stilar på en webbplats. Med CSS kan du styra sidlayout, färger, typografi, bakgrundsbild och mycket mer. I grund och botten, om det är en visuell stil, är CSS det sättet att föra dessa stilar till din webbplats.
När du lägger till CSS-format i ett dokument kan du märka att dokumentet börjar bli längre och längre. Även en liten sida med bara en handfull sidor kan sluta med en stor CSS-fil - och en mycket stor webbplats med massor av sidor av unikt innehåll kan ha mycket stora CSS-filer. Detta förhöjs av lyhörda webbplatser som har massor av mediefrågor som ingår i stilarken för att ändra hur visuella ser ut och sidan lägger ut för olika skärmar.
Ja, CSS-filer kan bli långa. Detta är inte ett stort problem när det gäller prestanda för webbplats och nedladdningshastighet, eftersom även en lång CSS-fil är troligen ganska liten (eftersom det bara är ett textdokument). Ändå räknas varje liten bit när det gäller sidhastighet, så om du kan göra ditt stilark smalare, det är en bra idé. Det här är "kommatecken" som kan vara mycket användbart i ditt stilark!
Komma och CSS
Du kanske undrat vilken roll kommatecken spelar i CSS-väljarsyntaxen. Som i meningar kommer kommatecken tydlighet - inte kod - till separatorerna. Kommunen i en CSS-väljare skiljer flera väljare i samma format.
Låt oss exempelvis titta på några CSS nedan.
th {färg: röd; }td {färg: röd; }p.red {färg: röd; }div # firstred {färg: röd; }
Med den här syntaxen säger du att du vill ha th taggar, td taggar, stycke taggar med klassen röd, och div-taggen med ID-förtrollade alla för att få stilfärgen röd.
Detta är helt acceptabelt CSS, men det finns två signifikanta nackdelar med att skriva det på så sätt:
- I framtiden, om du bestämmer dig för att ändra teckensnittsfärgen på dessa egenskaper till blå, måste du ändra den fyra gånger i ditt stilark.
- Det lägger till många extra tecken i ditt stilark som du inte behöver. Dessa 4 stilar kanske inte verkar som överkill, men om du fortsätter att göra detta över hela ditt stilark, kommer linjerna att lägga upp och det arket blir mycket, mycket större än det behöver vara.
För att undvika dessa nackdelar, och för att effektivisera din CSS-fil, försöker vi använda kommatecken.
Använda kommor till separata selektorer
Istället för att skriva 4 separata CSS-väljare och 4 regler kan du kombinera alla dessa stilar till en regelegenskap genom att skilja de enskilda väljare med ett komma. Så här skulle det bli gjort:
th, td, p.red, div # firstred {färg: röd; }
Kommateckenet fungerar i grunden som ordet "och" inuti väljaren. Så här gäller det för th taggar ANDtd taggar och stycke-taggar med klassen röd och div-taggen med ID-nummeret. Det är precis vad vi hade tidigare, men i stället för att behöva 4 CSS-regler har vi en enda regel med flera väljare. Det här gör kommatecken i väljaren, det tillåter oss att ha flera väljare i en regel.
Inte bara gör detta tillvägagångssätt för smidigare, renare CSS-filer, det gör också framtida uppdateringar så mycket enklare. Om du nu vill ändra färgen från rött till blått behöver du bara göra ändringen på en plats i stället för över de ursprungliga 4-stilsreglerna vi hade! Tänk på dessa tidsbesparingar över en hel CSS-fil och du kan se hur det här sparar både tid och rum på lång sikt!
Syntaxvariation
Vissa väljer att göra CSS mer läsbar genom att separera varje väljare på egen rad, istället för att skriva allt på en rad som ovan. Så här skulle det bli gjort:
e,td,p.red,div # firstred{färgen röd;}
Observera att du lägger ett komma efter varje väljare och använd sedan "enter" för att bryta nästa väljare på sin egen linje. Du lägger INTE ett kommatecken efter slutväljaren.
Genom att använda kommatecken mellan dina selektorer skapar du ett mer kompakt stilark som är lättare att uppdatera i framtiden och det är lättare att läsa idag!
Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard den 5/8/17
