Når du grupperer CSS-velgerne, bruker du de samme stilene på flere forskjellige elementer uten å gjenta stilene i stilarket ditt. I stedet for å ha to, tre eller flere CSS-regler som gjør det samme (for eksempel sette fargen på noe til rødt), bruker du en enkelt CSS-regel som oppnår det samme. Hemmeligheten bak denne effektivitetsfremmende taktikken er kommaet.
Hvordan gruppere CSS-velgere
For å gruppere CSS-velgerne i et stilark, bruk komma for å skille flere grupperte velgere i stilen. I dette eksemplet påvirker stilen p- og div-elementene:
div, p {farge: # f00; }
I denne sammenhengen betyr et komma "og", så denne velgeren gjelder alle avsnittelementer og alle delingselementer. Hvis kommaet manglet, ville velgeren i stedet gjelde for alle avsnittelementer som er et barn av en divisjon. Det er en annen type velger, så kommaet er viktig.
Du kan gruppere en hvilken som helst form for velger med en hvilken som helst annen velger. Dette eksemplet grupperer en klassevalg med en ID-velger:
p.red, #sub {color: # f00; }
Denne stilen gjelder ethvert avsnitt med klasseattributtet rød og ethvert element (fordi typen ikke er spesifisert) med ID-attributtet på under.
Du kan gruppere et hvilket som helst antall velgere, inkludert velgere som er enkeltord og sammensatte velgere. Dette eksemplet inkluderer fire forskjellige velgere:
p, .red, #sub, div a: link {color: # f00; }
Denne CSS-regelen vil gjelde for:
- Ethvert avsnittelement
- Ethvert element med klassen rød
- Ethvert element med ID på under
- De lenke pseudoklasse av ankerelementene som er etterkommere av en divisjon.
Den siste velgeren er en sammensatt velger. Som vist er det enkelt å kombinere det med de andre velgerne i denne CSS-regelen. Regelen setter fargen på # f00 (rødt) på disse fire velgerne, som er å foretrekke fremfor å skrive fire separate velgere for å oppnå det samme resultatet.
Enhver velger kan grupperes
Du kan plassere en hvilken som helst gyldig velger i en gruppe, og alle elementene i dokumentet som samsvarer med alle de grupperte elementene vil ha samme stil basert på den stilegenskapen.
Noen designere foretrekker å liste opp grupperte elementer på separate linjer for lesbarhet i koden. Utseendet på nettstedet og lasthastigheten forblir den samme. For eksempel kan du kombinere stiler atskilt med komma i en stilegenskap i en kodelinje:
th, td, p.red, div # firstred {farge: rød; }
eller du kan liste stilene på individuelle linjer for klarhet:
th,
td,
p.red,
div # firstred
{
fargen rød;
}
Hvorfor gruppere CSS-velgere?
Gruppering av CSS-velgerne hjelper til med å minimere størrelsen på stilarket ditt slik at det lastes raskere. Riktignok er ikke stilark de viktigste synderne i treg lasting; CSS-filer er tekstfiler, så selv veldig lange CSS-ark er små sammenlignet med uoptimerte bilder. Likevel hjelper hver eneste optimalisering, og hvis du kan barbere litt størrelse av CSS og laste sidene så mye raskere, er det en god ting.
Gruppering av velgere gjør det også enklere å vedlikeholde nettstedet. Hvis du trenger å gjøre en endring, kan du bare redigere en enkelt CSS-regel i stedet for flere. Denne tilnærmingen sparer tid og problemer.
Poenget: Gruppering av CSS-velgerne øker effektivitet, produktivitet, organisering og i noen tilfeller til og med lasthastighet.