Grupați mai mulți selectori CSS pentru a îmbunătăți viteza de încărcare
Eficiența este un factor important într-un site web de succes. Acest site ar trebui să fie eficient în modul în care utilizează imaginile online . Acest lucru va ajuta să vă asigurați că site-ul funcționează bine pentru vizitatori și că încărcați rapid pe dispozitivele acestora. Eficiența ar trebui să fie, de asemenea, o parte a procesului dvs. global, ajutându-vă să păstrați progresul site-ului la timp și la buget.
În cele din urmă, eficiența joacă un rol în toate aspectele legate de crearea unui site web și de succesul pe termen lung, inclusiv în stilurile care sunt scrise pentru foile CSS ale site-ului respectiv. Fiind capabil să creeze mai puține fișiere CSS curate, este ideal și una dintre modalitățile prin care puteți realiza acest lucru este gruparea mai multor selectori CSS împreună.
Gruparea selectorilor
Când grupați selectorii CSS , aplicați aceleași stiluri la mai multe elemente diferite, fără a repeta stilurile din foaia dvs. de stil. În loc să aveți două sau trei sau chiar mai multe reguli CSS, toate care fac același lucru (de exemplu, setați culoarea cevaului în roșu), aveți o singură regulă CSS care se realizează pentru pagina dvs.
Există o serie de motive pentru care această "grupare de selectori" beneficiază de o pagină. În primul rând, foaia de stil va fi mai mică și se va încărca mai repede. Desigur, foile de stil nu sunt unul dintre principalii vinovați atunci când vine vorba de site-uri de încărcare lentă. Fișierele CSS sunt fișiere text, deci foile de CSS chiar foarte lungi sunt mici, de dimensiuni reduse, în comparație cu imaginile neoptimizate. Cu toate acestea, fiecare număr mic contează și dacă puteți să vă rasați o parte din CSS și să încărcați paginile mult mai repede, este întotdeauna un lucru bun.
În general, vitezele de încărcare peste medie pentru site-uri sunt mai mici de 3 secunde; 3 la 7 secunde este aproximativ medie și mai mult de 7 secunde este prea lent. Aceste numere mici înseamnă că, pentru a le atinge cu site-ul dvs., trebuie să faceți tot ce puteți! Acesta este motivul pentru care puteți ajuta la menținerea rapidă a site-ului utilizând selectori CSS grupați.
Cum se selectează grupurile CSS
Pentru a grupa selectorii CSS împreună în foaia dvs. de stil, utilizați virgule pentru a separa mai multe selectori grupați în stil. În exemplul de mai jos, stilul afectează elementele p și div:
div, p {culoare: # f00; }Virgula înseamnă în principiu "și". Deci acest selector se aplică tuturor elementelor de paragraf și tuturor elementelor de divizare. Dacă virgula lipsea, ar fi în schimb toate elementele paragrafului care sunt un copil al unei diviziuni. Acesta este un fel de selector foarte diferit, astfel încât această virgulă chiar schimbă sensul selectorului!
Orice formă de selector poate fi grupată cu orice alt selector. În acest exemplu, un selector de clasă este grupat cu un selector de identificare:
p.red, #sub {culoare: # f00; }Deci, acest stil se aplică oricărui paragraf cu atributul de clasă "roșu", și orice element (deoarece nu am specificat ce fel) care are un atribut ID al "sub".
Puteți grupa orice număr de selectori împreună, inclusiv selectori care sunt cuvinte singulare și selectori compund. Acest exemplu include patru selectori diferiți:
p, .red, #sub, div a: link {culoare: # f00; }Deci această regulă CSS se va aplica la următoarele:
- Orice element de paragraf
- Orice element cu clasa "roșu"
- Orice element cu un ID de "sub"
- Pseudo-clasa de "legătură" a elementelor de ancorare care sunt decendenți ai unei divizări.
Ultimul selector este un selector compus. Puteți vedea că este ușor de combinat cu ceilalți selectori din această regulă CSS. Prin această regulă, setăm culoarea # f00 (care este roșie) pe acești 4 selectori, care preferă să scrie 4 selectori separați pentru a obține același rezultat.
Un alt beneficiu al grupării selectorilor este că, dacă trebuie să faceți o schimbare, puteți edita o singură regulă CSS în loc de mai multe. Aceasta înseamnă că această abordare vă economisește greutatea paginii și timpul când vine vorba de menținerea site-ului în viitor.
Orice selector poate fi grupat
După cum puteți vedea din exemplele de mai sus, orice selector valid poate fi plasat într-un grup și toate elementele din document care se potrivesc cu toate elementele grupate vor avea același stil bazat pe proprietatea respectivă.
Unii oameni preferă să precizeze elementele grupate pe linii separate pentru lizibilitate în cod. Apariția pe site și viteza de încărcare rămân aceleași. De exemplu, puteți combina stiluri separate prin virgule într-o proprietate de stil într-o singură linie de cod:
th, td, p.red, div # prima dată {culoare: roșu; }
sau puteți lista stilurile pe linii individuale pentru claritate:
lea,
td,
p.red,
div # firstred
{
culoarea rosie;
}
Oricare dintre metodele pe care le folosiți pentru a grupa mai mulți selectori CSS accelerează site-ul dvs. și facilitează gestionarea stilurilor pe termen lung.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 5/8/17.