Kada grupirate CSS birače, primjenjujete iste stilove na nekoliko različitih elemenata bez ponavljanja stilova u tablici stilova. Umjesto da imate dva, tri ili više CSS pravila koja rade istu stvar (na primjer, boju nečega postavite na crvenu), koristite jedno CSS pravilo koje postiže istu stvar. Tajna ove taktike za povećanje učinkovitosti je zarez.
Kako grupirati CSS birače
Da biste grupirali CSS birače u listu stilova, koristite zareze za odvajanje više grupiranih birača u stilu. U ovom primjeru stil utječe na elemente p i div:
div, p {boja: # f00; }
U ovom kontekstu, zarez znači "i", tako da se ovaj birač odnosi na sve elemente odlomka i sve elemente podjele. Ako zarez nedostaje, birač bi se umjesto toga primijenio na sve elemente odlomka koji su podređeni odjelu. To je druga vrsta selektora, pa je zarez važan.
Možete grupirati bilo koji oblik selektora s bilo kojim drugim selektorom. Ovaj primjer grupira selektor klase s selektorom ID-a:
p.red, #sub {boja: # f00; }
Ovaj se stil odnosi na bilo koji odlomak s atributom klase od Crvena i bilo koji element (jer vrsta nije navedena) s ID atributom pod.
Možete grupirati bilo koji broj selektora, uključujući selektore koji su pojedinačne riječi i složene selektore. Ovaj primjer uključuje četiri različita selektora:
p, .crvena, #sub, div a: link {color: # f00; }
Ovo CSS pravilo odnosilo bi se na:
- Bilo koji element odlomka
- Bilo koji element s klasom Crvena
- Bilo koji element s ID-om pod
- The veza pseudo klasa sidrenih elemenata koji su potomci podjele.
Taj posljednji selektor je složeni selektor. Kao što je prikazano, lako se kombinira s ostalim selektorima u ovom CSS pravilu. Pravilo postavlja boju # f00 (crveno) na ova četiri selektora, što je poželjnije od pisanja četiri zasebna selektora kako bi se postigao isti rezultat.
Bilo koji selektor može se grupirati
Bilo koji valjani selektor možete smjestiti u grupu, a svi elementi u dokumentu koji se podudaraju sa svim grupiranim elementima imat će isti stil na temelju tog svojstva stila.
Neki dizajneri radije navode grupirani elementi na odvojenim redovima radi čitljivosti u kodu. Izgled na web mjestu i brzina učitavanja ostaju isti. Na primjer, možete kombinirati stilove odvojene zarezima u jedno svojstvo stila u jednom retku koda:
th, td, p.red, div # firstred {boja: crvena; }
ili za preglednost možete navesti stilove u pojedinačnim linijama:
th,
td,
p.crvena,
div # firstred
{
boja: crvena;
}
Zašto grupirati CSS birače?
Grupiranje CSS selektora pomaže smanjiti veličinu vašeg lista stilova tako da se brže učitava Doduše, listovi stilova nisu glavni krivci za polagano učitavanje; CSS datoteke su tekstualne datoteke, pa su čak i vrlo dugi CSS listovi sićušni u usporedbi s neoptimiziranim slikama. Ipak, svaki dio optimizacije pomaže, a ako možete obrisati neku veličinu sa CSS-a i učitati stranice puno brže, to je dobra stvar.
Grupiranje selektora također olakšava održavanje web mjesta. Ako trebate unijeti promjenu, možete jednostavno urediti jedno CSS pravilo umjesto više njih. Ovaj pristup štedi vrijeme i gnjavažu.
Dno crta: Grupiranje CSS selektora povećava učinkovitost, produktivnost, organizaciju, au nekim slučajevima čak i brzinu učitavanja.