Group Multiple CSS Selectors para mapabuti ang Load Speed
Ang kahusayan ay isang mahalagang kadahilanan sa isang matagumpay na website. Ang site na iyon ay dapat na mahusay sa kung paano ito gumagamit ng mga imahe online . Makatutulong ito na matiyak na ang site ay mahusay na gumaganap para sa mga bisita at mabilis na nag-load sa kanilang mga device. Ang kahusayan ay dapat ding bahagi ng iyong pangkalahatang proseso, na tumutulong sa iyo upang mapanatili ang pag-unlad ng isang site sa oras at sa badyet.
Sa wakas, ang kahusayan ay gumaganap ng isang papel sa lahat ng aspeto ng paglikha ng isang website at matagalang tagumpay, kabilang ang mga estilo na isinulat para sa CSS sheet ng site na iyon. Ang pagiging magagawang lumikha ng leaner, mas malinis na mga file ng CSS ay perpekto, at isa sa mga paraan na maaari mong makamit ito ay sa pamamagitan ng pagpapangkat ng maramihang mga tagapili ng CSS nang sama-sama.
Pagpapangkat ng Mga Pinili
Kapag nagpangkat ka ng mga tagapili ng CSS , inilalapat mo ang parehong mga estilo sa maraming iba't ibang mga elemento nang hindi paulit-ulit ang mga estilo sa iyong style sheet. Sa halip na magkaroon ng dalawa o tatlo o higit pang mga panuntunan sa CSS, ang lahat ng ito ay ginagawa ang parehong bagay (halimbawa, itakda ang kulay ng isang bagay na pula), mayroon kang isang panuntunan sa CSS na nagagawa para sa iyong pahina.
Mayroong ilang mga kadahilanan kung bakit ang "pagpangkat ng mga tagapili" ay nakikinabang sa isang pahina. Unang offt, ang iyong style sheet ay magiging mas maliit at mag-load ng mas mabilis. Tinatanggap, ang estilo ng sheet ay hindi isa sa mga pangunahing may kinalaman pagdating sa mabagal na pag-load ng mga site. Ang mga file na CSS ay mga tekstong file, kaya kahit na talagang mahaba ang mga sheet ng CSS ay napakaliit, ang laki ng file na matalino, kapag inihambing sa mga hindi naka-optimize na mga imahe. Gayunpaman, bawat maliit na bilang, at kung maaari mong mag-ahit ng ilang laki ng iyong CSS at i-load ang mga pahina na mas mabilis, palaging isang magandang bagay na gagawin.
Sa pangkalahatan, mas mataas sa average na bilis ng pag-load para sa mga site ay mas mababa sa 3 segundo; 3 hanggang 7 segundo ay tungkol sa average, at higit sa 7 segundo ay masyadong mabagal. Ang mga mababang bilang na ito ay nangangahulugang, upang makamit ang mga ito sa iyong site, kailangan mong gawin ang lahat ng magagawa mo! Ito ang dahilan kung bakit maaari mong tulungan na panatilihing mabilis ang iyong site gamit ang pinipili ng mga piniling CSS.
Paano Pumipili ng Mga Pangkat ng CSS
Upang pangkatin ang mga tagapili ng CSS nang sama-sama sa iyong estilo ng sheet, gumagamit ka ng mga kuwit upang paghiwalayin ang maraming naka-grupo na tagapili sa estilo. Sa halimbawa sa ibaba, ang estilo ay nakakaapekto sa mga elemento ng p at div:
div, p {color: # f00; }Ang kuwa ay karaniwang nangangahulugang "at". Kaya ang tagapili na ito ay nalalapat sa lahat ng mga elemento ng talata AT lahat ng elemento ng dibisyon. Kung ang kuwit ay nawawala, ito ay sa halip ay magiging lahat ng mga elemento ng talata na isang anak ng isang dibisyon. Iyon ay isang napaka iba't ibang uri ng tagapili, kaya ang kuwang na ito ay talagang nagbabago sa kahulugan ng tagapili!
Anumang uri ng tagapili ay maaaring mapangkat sa anumang iba pang tagapili. Sa halimbawang ito, ang isang tagapili ng klase ay naka-grupo sa isang tagapili ng ID:
p.red, #sub {color: # f00; }Kaya ang estilo na ito ay nalalapat sa anumang talata na may katangian ng klase ng "red", AT anumang elemento (dahil hindi namin tinukoy kung anong uri) na mayroong ID na katangian ng "sub".
Maaari mong pangkatin ang anumang bilang ng mga tagapili nang sama-sama, kabilang ang mga tagapili na nag-iisang salita at magkakasama sa mga tagapili. Kasama sa halimbawang ito ang apat na magkakaibang tagapili:
p, .red, #sub, div a: link {color: # f00; }Kaya ang CSS rule na ito ay nalalapat sa mga sumusunod:
- Anumang talata elemento
- Anumang elemento na may klase ng "red"
- Anumang elemento na may ID ng "sub"
- Ang "link" pseudo class ng mga elemento ng anchor na decendents ng isang dibisyon.
Ang huling tagapili ay isang pinagsamang tagapili. Makikita mo ito ay madaling isinama sa iba pang mga tagapili sa panuntunang CSS na ito. Sa pamamagitan ng patakarang iyon, itinatakda natin ang kulay ng # f00 (na pula) sa 4 na mga tagapili na ito, na mas mainam sa pagsulat ng 4 na magkakahiwalay na tagapili upang makamit ang parehong resulta.
Ang isa pang benepisyo ng pagpapangkat ng mga tagapili ay na, kung kailangan mong gumawa ng isang pagbabago, maaari mong i-edit ang isang solong patakaran ng CSS sa halip ng maraming mga. Ang ibig sabihin nito na ang diskarte na ito ay nakakatipid sa iyo ng timbang at oras ng pahina pagdating sa pagpapanatili ng site sa hinaharap.
Anumang Tagapili Maaaring Nakangkat
Tulad ng makikita mo mula sa mga halimbawa sa itaas, ang anumang may-bisang tagapili ay maaaring mailagay sa isang grupo, at ang lahat ng mga elemento sa dokumento na tumutugma sa lahat ng mga naka-element na elemento ay magkakaroon ng parehong estilo batay sa estilong iyon ng estilo.
Pinipili ng ilang mga tao na ilista ang mga naka-grupo na elemento sa magkakahiwalay na mga linya para sa kalinawan sa code. Ang hitsura sa website at ang bilis ng pag-load ay nananatiling pareho. Halimbawa, maaari mong pagsamahin ang mga estilo na pinaghihiwalay ng mga kuwit sa isang estilo ng ari-arian sa isang linya ng code:
ika, td, pred, div # firstred {color: red; }
o maaari mong ilista ang mga estilo sa mga indibidwal na linya para sa kalinawan:
ika,
td,
p.red,
div # firstred
{
Kulay pula;
}
Ang alinman sa paraan na ginagamit mo upang pangkatin ang maraming mga tagapili ng CSS ay nagpapabilis sa iyong site at ginagawang mas madaling pamahalaan ang mga estilo ng mahabang panahon.
Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 5/8/17.