När du grupperar CSS-väljare tillämpar du samma stilar på flera olika element utan att upprepa stilarna i stilformatet. Istället för att ha två, tre eller fler CSS-regler som gör samma sak (ställa in färgen på något till exempel till rött) använder du en enda CSS-regel som åstadkommer samma sak. Hemligheten med denna effektivitetshöjande taktik är komma.
Hur gruppera CSS-väljare
För att gruppera CSS-väljare i ett formatmall, använd kommatecken för att separera flera grupperade väljare i stilen. I det här exemplet påverkar stilen p- och div-elementen:
div, p {färg: # f00; }
I detta sammanhang betyder ett kommatecken "och", så den här väljaren gäller alla styckeelement och alla delningselement. Om kommaet saknades skulle väljaren istället tillämpas på alla styckeelement som är underordnade av en division. Det är en annan typ av väljare, så kommat är viktigt.
Du kan gruppera valfri form av väljare med valfri annan väljare. Detta exempel grupperar en klassväljare med en ID-väljare:
p.red, #sub {color: # f00; }
Denna stil gäller alla stycken med klassattributet röd och alla element (eftersom typen inte anges) med ID-attributet sub.
Du kan gruppera valfritt antal väljare, inklusive väljare som är enstaka ord och sammansatta väljare. Det här exemplet innehåller fyra olika väljare:
p, .red, #sub, div a: länk {color: # f00; }
Denna CSS-regel gäller:
- Vilket stycke som helst
- Alla element med klassen röd
- Alla element med ID på sub
- De länk pseudoklass av ankarelementen som är ättlingar till en uppdelning.
Den sista väljaren är en sammansatt väljare. Som visat är det enkelt att kombinera med andra väljare i denna CSS-regel. Regeln anger färgen på # f00 (röd) på dessa fyra väljare, vilket är att föredra framför att skriva fyra separata väljare för att uppnå samma resultat.
Alla väljare kan grupperas
Du kan placera valfri väljare i en grupp, och alla element i dokumentet som matchar alla de grupperade elementen kommer att ha samma stil baserat på den stilegenskapen.
Vissa designers föredrar att lista grupperade element på separata rader för läsbarhet i koden. Utseendet på webbplatsen och lasthastigheten förblir densamma. Du kan till exempel kombinera stilar separerade med komma till en stilegenskap i en kodrad:
th, td, p.red, div # firstred {färg: röd; }
eller så kan du lista stilarna på enskilda rader för tydlighetens skull:
th,
td,
p.red,
div # firstred
{
färgen röd;
}
Varför gruppera CSS-väljare?
Gruppering av CSS-väljare hjälper till att minimera storleken på ditt formatmall så att det laddas snabbare. Visserligen är formatmallar inte de främsta synderna i långsam laddning. CSS-filer är textfiler, så även mycket långa CSS-ark är små jämfört med ooptimerade bilder. Ändå hjälper varje bit av optimering, och om du kan raka lite storlek av din CSS och ladda sidorna så mycket snabbare, är det bra.
Gruppering av väljare underlättar också platsunderhåll. Om du behöver göra en ändring kan du helt enkelt redigera en enda CSS-regel istället för flera. Detta tillvägagångssätt sparar tid och krångel.
Slutsatsen: Gruppering av CSS-väljare ökar effektiviteten, produktiviteten, organisationen och i vissa fall till och med lasthastigheten.