Grupējot CSS atlasītājus, jūs lietojat tos pašus stilus vairākiem dažādiem elementiem, neatkārtojot stilus savā stila lapā. Tā vietā, lai būtu divi, trīs vai vairāk CSS kārtulas, kas dara to pašu (piemēram, iestatiet kaut kā krāsu sarkanai), jūs izmantojat vienu CSS kārtulu, kas izpilda to pašu. Šīs efektivitātes paaugstināšanas taktikas noslēpums ir komats.
Kā grupēt CSS atlasītājus
Lai grupētu CSS atlasītājus stila lapā, izmantojiet komatus, lai atdalītu vairākus grupētus atlasītājus stilā. Šajā piemērā stils ietekmē elementus p un div:
div, p {krāsa: # f00; }
Šajā kontekstā komats nozīmē "un", tāpēc šis atlasītājs attiecas uz visiem rindkopu elementiem un visiem sadalījuma elementiem. Ja komata nebūtu, atlasītājs tā vietā lietotu visus rindkopu elementus, kas ir dalījuma bērns. Tas ir cita veida atlasītājs, tāpēc komats ir svarīgs.
Jūs varat grupēt jebkura veida atlasītāju ar jebkuru citu atlasītāju. Šis piemērs grupē klases atlasītāju ar ID atlasītāju:
p.red, #sub {color: # f00; }
Šis stils attiecas uz jebkuru rindkopu ar klases atribūtu sarkans un jebkuru elementu (jo veids nav norādīts) ar ID atribūtu apakšnodaļa.
Varat sagrupēt jebkuru atlasītāju skaitu, ieskaitot atlasītājus, kas ir atsevišķi vārdi, un saliktos selektorus. Šajā piemērā ir iekļauti četri dažādi atlasītāji:
p, .red, #sub, div a: saite {color: # f00; }
Šis CSS noteikums attieksies uz:
- Jebkurš rindkopas elements
- Jebkurš elements ar klasi sarkans
- Jebkurš elements ar ID apakšnodaļa
- The saite enkura elementu pseido klase, kas ir sadalījuma pēcteči.
Šis pēdējais selektors ir saliktais selektors. Kā parādīts, to var viegli apvienot ar citiem šī CSS noteikuma atlasītājiem. Noteikums nosaka krāsu # f00 (sarkans) uz šiem četriem atlasītājiem, kas ir labāk nekā četri atsevišķi atlasītāji, lai sasniegtu to pašu rezultātu.
Jebkuru atlasītāju var sagrupēt
Jūs varat ievietot jebkuru derīgu atlasītāju grupā, un visiem dokumenta elementiem, kas atbilst visiem grupētajiem elementiem, būs tāds pats stils, pamatojoties uz šī stila rekvizītu.
Daži dizaineri dod priekšroku to uzskaitīšanai grupēti elementi uz atsevišķām koda salasāmības rindām. Izskats vietnē un ielādes ātrums paliek nemainīgs. Piemēram, stilus, kas atdalīti ar komatiem, vienā koda rindā varat apvienot vienā stila īpašumā:
th, td, p.red, div # firstred {krāsa: sarkana; }
vai skaidrības labad varat uzskaitīt stilus atsevišķās rindās:
th,
td,
p.sarkans,
div # firstred
{
krāsa: sarkana;
}
Kāpēc grupēt CSS atlasītājus?
CSS selektoru grupēšana palīdz samazināt jūsu stila lapas izmēru, tāpēc tā tiek ielādēta ātrāk. Jāatzīst, ka lēnās ielādēs stila lapas nav galvenie vaininieki; CSS faili ir teksta faili, tāpēc pat ļoti garas CSS lapas ir niecīgas, salīdzinot ar neoptimizētiem attēliem. Tomēr katra optimizācijas daļa palīdz, un, ja jūs varat nospiest kādu izmēru no CSS un ielādēt lapas daudz ātrāk, tas ir labi.
Atlasītāju grupēšana arī ievērojami atvieglo vietnes uzturēšanu. Ja jums jāveic izmaiņas, varat vienkārši rediģēt vienu CSS kārtulu, nevis vairākas. Šī pieeja ietaupa laiku un grūtības.
Apakšējā līnija: CSS selektoru grupēšana palielina efektivitāti, produktivitāti, organizatoriskumu un dažos gadījumos pat slodzes ātrumu.