Grupuoti kelis CSS rinkiklius, kurie pagerina apkrovos greitį
Efektyvumas yra svarbus sėkmingos svetainės veiksnys. Ši svetainė turėtų būti veiksminga, kaip ji naudoja vaizdus internete . Tai padės užtikrinti, kad svetainė gerai tinka lankytojams ir greitai įkelta į savo įrenginius. Efektyvumas taip pat turėtų būti jūsų viso proceso dalis, padedanti jums išlaikyti svetainės pažangą laiku ir biudžete.
Galų gale, efektyvumas vaidina svarbų vaidmenį visais svetainės kūrimo ir ilgalaikės sėkmės aspektais, įskaitant stilių, kurie parašyti šios svetainės CSS lapams. Gebėjimas kurti lanerius, švaresnius CSS failus yra idealus, ir vienas iš būdų, kaip tai pasiekti, yra sugrupuoti kelis CSS selektorius kartu.
Grupavimo pasirinkėjai
Kai grupuojate CSS selektorių , jūs taikote tuos pačius stilius keliems skirtingiems elementams, nespausdami stilius savo stilių lentelėje. Vietoj dviejų ar trijų ar dar daugiau CSS taisyklių, kurie visi daro tą patį (pvz., Nustatykite kažkokio raudonos spalvos spalvą), jūs turite vieną CSS taisyklę, kuri įvykdyta jūsų puslapiui.
Yra keletas priežasčių, kodėl ši "selektorių grupė" naudinga puslapiui. Visų pirma, jūsų stiliaus lapas bus mažesnis ir įkeltas greičiau. Žinoma, stilių lentelės nėra viena iš pagrindinių kaltininkų, kai kalbama apie lėtas pakrovimo vietas. CSS failai yra tekstiniai failai, todėl netgi labai ilgi CSS lapai yra mažesni, failų dydžio, protingas, palyginti su neoptimizuotais vaizdais. Vis dėlto, kiekvienas šiek tiek skaičiuojamas, ir jei jūs galite nusiskusti tam tikrą savo CSS dydį ir įkelti daug greitesnius puslapius, tai visada yra geras dalykas.
Apskritai, didesnis nei vidutinis svetainių apkrovos greitis yra trumpesnis nei 3 sekundės; Nuo 3 iki 7 sekundžių yra vidutiniškai, o daugiau nei 7 sekundės yra per lėtas. Šie maži skaičiai reiškia, kad norint pasiekti juos savo svetainėje, turite daryti viską, ką galite padaryti! Štai kodėl jūs galite padėti išlaikyti jūsų svetainę sparčiai naudojant sugrupuotus CSS selektorius.
Kaip grupuoti CSS rinkiklius
Norėdami suskirstyti CSS selektorius į savo stilių lentelę, naudodami kableliais stilių atskirite kelis sugrupuotus selektorius . Toliau pateiktame pavyzdyje stilius veikia p ir div elementus:
div, p {color: # f00; }Kablelis iš esmės reiškia "ir". Taigi šis selektorius taikomas visiems dalių elementams IR visiems dalijimo elementams. Jei trūko kablelio, vietoj to būtų visi daliniai elementai, kurie yra divizijos vaikas. Tai yra labai skirtingas pasirinkimo tipas, todėl ši kata tikrai pakeičia selektoriaus reikšmę!
Bet kurią selektoriaus formą galima sugrupuoti su bet kuriuo kitu pasirinkimu. Šiame pavyzdyje klasės parinkiklis sugrupuotas su ID atranka:
p.red, #sub (color: # f00; }Taigi šis stilius taikomas bet kuriai pastraipai su klasės atributu "raudona", IR bet koks elementas (nes mes nenurodome, kokia rūšis) turi "sub" ID atributą.
Jūs galite grupuoti bet kokį skaičių selektorių kartu, įskaitant selektorių, kurie yra vieni žodžiai ir sudedamųjų dalių selektoriai. Šiame pavyzdyje yra keturi skirtingi selektoriai:
p, .red, #sub, div a: link {color: # f00; }Taigi ši CSS taisyklė būtų taikoma šiems dalykams:
- Bet pastraipos elementas
- Bet kuris elementas su "raudonos" klasės
- Bet kuris elementas su "sub"
- "Susiejimo" pseudo klasės inkaro elementai, kurie yra padalos decendentai.
Šis paskutinis selektorius yra jungtinis selektorius. Galite matyti, kad tai lengvai derinama su kitais šios "CSS" taisyklės valdikliais. Remdamiesi šia taisykle, mes nustatome # f00 spalvą (kuri yra raudona) ant šių 4 selektorių, kuriam pageidautina rašyti 4 atskirus selektorius, kad gautumėte tą patį rezultatą.
Kitas selektorių grupavimo privalumas yra tai, kad, jei jums reikia pakeisti, galite redaguoti vieną CSS taisyklę, o ne kelias. Tai reiškia, kad šis metodas leidžia sutaupyti puslapio svorio ir laiko, kai ateityje bus išlaikoma svetainė.
Bet kuris pasirinkimas gali būti grupuojamas
Kaip matote iš pirmiau pateiktų pavyzdžių, bet koks galiojantis parinkiklis gali būti įtrauktas į grupę, o visi dokumento elementai, kurie atitinka visus sugrupuotus elementus, turės tą patį stilių, kuris remiasi šio stiliaus nuosavybe.
Kai kurie žmonės nori, kad grupėje esantys elementai būtų pateikiami atskirose eilutėse, kad kodas būtų įskaitomas. Svetainės išvaizda ir apkrovos greitis išlieka tokie patys. Pavyzdžiui, galite atskirti stilių, atskirtų kableliais, į vieną stiliaus nuosavybę vienoje eilutėje:
th, td, p.red, div # firstred {color: red; }
arba galite nurodyti stilių atskirose eilutėse aiškumo:
th,
td
p.red
Div # pirmasis
{
spalva: raudona;
}
Bet koks metodas, kurį naudojate grupei kelių CSS parinkiklių, pagreitina jūsų svetainę ir lengviau valdyti stilius ilgą laiką.
Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 5/8/17.