Ko združite izbirnike CSS, uporabite iste sloge za več različnih elementov, ne da bi ponavljali sloge v vašem slogu. Namesto dveh, treh ali več pravil CSS, ki delajo isto stvar (na primer barvo nečesa nastavite na rdečo), uporabite eno pravilo CSS, ki doseže isto stvar. Skrivnost te taktike za povečanje učinkovitosti je vejica.
Kako združiti izbirnike CSS
Če želite izbirnike CSS združiti v slogovni list, z vejicami ločite več združenih izbirnikov v slogu. V tem primeru slog vpliva na elemente p in div:
div, p {color: # f00; }
V tem kontekstu vejica pomeni "in", zato ta izbirnik velja za vse elemente odstavka in vse elemente delitve. Če bi vejica manjkala, bi izbirnik namesto tega uporabil vse elemente odstavka, ki so podrejeni odsek. To je drugačna vrsta izbirnika, zato je vejica pomembna.
Katero koli obliko izbirnika lahko združite s katerim koli drugim izbirnikom. Ta primer združuje izbirnik razreda z izbirnikom ID:
p.red, #sub {color: # f00; }
Ta slog velja za kateri koli odstavek z atributom razreda rdeča in kateri koli element (ker vrsta ni določena) z atributom ID pod.
Lahko izberete poljubno število izbirnikov, vključno z izbirniki, ki so posamezne besede in sestavljeni izbirniki. Ta primer vključuje štiri različne izbirnike:
p, .crvena, #sub, div a: link {color: # f00; }
To pravilo CSS bi veljalo za:
- Kateri koli odstavek
- Kateri koli element z razredom rdeča
- Kateri koli element z ID pod
- The povezava psevdo razred sidrnih elementov, ki so potomci delitve.
Ta zadnji izbirnik je sestavljeni izbirnik. Kot je prikazano, ga je enostavno kombinirati z drugimi izbirniki v tem pravilu CSS. Pravilo določa barvo # f00 (rdeča) na teh štirih izbirnikih, kar je bolje, če napišemo štiri ločene izbirne elemente, da dosežemo enak rezultat.
Vsak izbirnik je mogoče združiti v skupine
V skupino lahko postavite kateri koli veljaven izbirnik in vsi elementi v dokumentu, ki se ujemajo z vsemi zbranimi elementi, bodo imeli enak slog glede na to lastnost sloga.
Nekateri oblikovalci raje navedejo združeni elementi v ločenih vrsticah zaradi čitljivosti v kodi. Videz na spletnem mestu in hitrost nalaganja ostajata enaka. Na primer, sloge, ločene z vejicami, lahko v eni vrstici kode kombinirate v eno lastnost sloga:
th, td, p.red, div # firstred {color: red; }
ali pa lahko zaradi jasnosti naštejete sloge v posameznih vrsticah:
th,
td,
p.red,
div # firstred
{
barva: rdeča;
}
Zakaj združiti izbirnike CSS?
Združevanje izbirnikov CSS pomaga zmanjšati velikost vašega sloga, tako da se nalaga hitreje. Res je, da slogovni listi niso glavni krivci za počasno nalaganje; Datoteke CSS so besedilne datoteke, zato so tudi zelo dolgi listi CSS v primerjavi z neoptimiziranimi slikami majhni. Kljub temu vsak košček optimizacije pomaga in če lahko svoj CSS obrišete nekaj velikosti in strani naložite veliko hitreje, je to dobro.
Izbirniki razvrščanja v skupine tudi olajšajo vzdrževanje strani. Če morate narediti spremembo, lahko preprosto uredite eno pravilo CSS namesto več. Ta pristop prihrani čas in težave.
Bistvo: združevanje izbirnikov CSS povečuje učinkovitost, produktivnost, organiziranost in v nekaterih primerih celo hitrost nalaganja.