CSS-i valijate rühmitamisel rakendate samu stiile mitmele erinevale elemendile ilma oma stiililehes olevaid stiile kordamata. Selle asemel, et teil oleks kaks, kolm või enam CSS-reeglit, mis teevad sama asja (määrake millegi värv näiteks punaseks), kasutate ühte CSS-reeglit, mis täidab sama asja. Selle tõhusust suurendava taktika saladus on koma.
Kuidas grupeerida CSS-i valijaid
CSS-valijate grupeerimiseks stiililehel mitme rühmitatud valija eraldamiseks kasutage komasid stiilis. Selles näites mõjutab stiil elemente p ja div:
div, p {värv: # f00; }
Selles kontekstis tähendab koma "ja", nii et see valija kehtib kõigi lõiguelementide ja kõigi jagamise elementide kohta. Kui koma puuduks, rakendaks valija selle asemel kõiki lõiguelemente, mis on jaotuse laps. See on teist tüüpi valija, nii et koma on oluline.
Võite rühmitada mis tahes vormi valija mis tahes muu valijaga. See näide grupeerib klassi valija ID-valijaga:
p.red, #sub {color: # f00; }
See stiil kehtib kõigi lõikudega, mille atribuut on klass punane ja mis tahes elemendi (kuna liik pole määratletud) ID-atribuudiga alapunkt.
Saate rühmitada mis tahes arvu valijaid, sealhulgas üksikud sõnad ja liitvalijad. See näide sisaldab nelja erinevat valijat:
p, .red, #sub, div a: link {color: # f00; }
Seda CSS-reeglit kohaldatakse järgmiste seadmete suhtes:
- Mis tahes lõigu element
- Kõik elemendid, mille klass on punane
- Iga element ID-ga alapunkt
- The link jagude järeltulijateks olevate ankurelementide pseudoklass.
See viimane valija on liitvalija. Nagu näidatud, on see hõlpsasti ühendatud teiste selle CSS-reegli valijatega. Reegel määrab värvi # f00 (punane) nendel neljal selektoril, mis on sama tulemuse saavutamiseks eelistatav nelja eraldi valija kirjutamisele.
Iga valija saab rühmitada
Võite paigutada rühma mis tahes kehtiva valija ja dokumendi kõikidel elementidel, mis vastavad kõigile rühmitatud elementidele, on selle stiili atribuudi põhjal sama stiil.
Mõned disainerid eelistavad neid loetleda rühmitatud elemendid koodil loetavuse jaoks eraldi ridadel. Välimus veebisaidil ja laadimiskiirus jäävad samaks. Näiteks võite kombineerida komadega eraldatud stiilid ühes koodireas üheks stiili atribuudiks:
th, td, p.red, div # firstred {värvus: punane; }
või saate selguse huvides loetleda stiilid üksikutele ridadele:
th,
td,
p.punane,
div # tulihingeline
{
värv: punane;
}
Miks rühmitada CSS-i valijaid?
CSS-i valijate rühmitamine aitab teie stiililehte väiksemaks muuta, nii et see laaditakse kiiremini. Tõsi, stiililehed ei ole aeglase laadimise peamised süüdlased; CSS-failid on tekstifailid, nii et isegi väga pikad CSS-lehed on optimeerimata piltidega võrreldes väikesed. Sellegipoolest aitab iga optimeerimispisik ja kui suudate oma CSS-ist mõne suuruse raseerida ja lehti palju kiiremini laadida, on see hea.
Selektorite rühmitamine muudab ka saidi hooldamise palju lihtsamaks. Kui peate muudatust tegema, saate lihtsalt mitme CSS-i reegli muuta. Selline lähenemine säästab aega ja vaeva.
Alumine rida: CSS-valijate rühmitamine suurendab tõhusust, tootlikkust, organiseeritust ja mõnel juhul isegi laadimiskiirust.