Când grupați selectoarele CSS, aplicați aceleași stiluri mai multor elemente diferite fără a repeta stilurile din foaia de stil. În loc să aveți două, trei sau mai multe reguli CSS care fac același lucru (setați culoarea ceva la roșu, de exemplu), utilizați o singură regulă CSS care realizează același lucru. Secretul acestei tactici de creștere a eficienței este virgula.
Cum să grupați selectoarele CSS
Pentru a grupa selectoarele CSS într-o foaie de stil, folosiți virgule pentru a separa mai multe selectoare grupate în stil. În acest exemplu, stilul afectează elementele p și div:
div, p {culoare: # f00; }
În acest context, o virgulă înseamnă „și”, astfel încât acest selector se aplică tuturor elementelor de paragraf și tuturor elementelor de divizare. Dacă lipsa virgula, selectorul s-ar aplica în schimb tuturor elementelor de paragraf care sunt un copil al unei diviziuni. Acesta este un alt tip de selector, deci virgula este importantă.
Puteți grupa orice formă de selector cu orice alt selector. Acest exemplu grupează un selector de clasă cu un selector ID:
p.red, #sub {color: # f00; }
Acest stil se aplică oricărui paragraf cu atributul clasei de roșu și orice element (deoarece nu este specificat genul) cu un atribut ID de sub.
Puteți grupa orice număr de selectoare, inclusiv selectoare care sunt cuvinte unice și selectoare compuse. Acest exemplu include patru selectoare diferite:
p, .red, #sub, div a: link {color: # f00; }
Această regulă CSS se va aplica:
- Orice element de paragraf
- Orice element cu clasa de roșu
- Orice element cu un ID de sub
- legătură pseudo clasă a elementelor de ancorare care sunt descendenți ai unei diviziuni.
Ultimul selector este un selector compus. După cum se arată, este ușor combinat cu ceilalți selectori din această regulă CSS. Regula stabilește culoarea # f00 (roșu) pe acești patru selectori, ceea ce este de preferat să scrieți patru selectoare separate pentru a obține același rezultat.
Orice selector poate fi grupat
Puteți plasa orice selector valid într-un grup, iar toate elementele din document care se potrivesc cu toate elementele grupate vor avea același stil bazat pe acea proprietate de stil.
Unii designeri preferă să enumere elemente grupate pe linii separate pentru lizibilitate în cod. Aspectul pe site și viteza de încărcare rămân aceleași. De exemplu, puteți combina stilurile separate prin virgule într-o singură proprietate de stil într-o singură linie de cod:
th, td, p.red, div # firstred {color: red; }
sau puteți lista stilurile pe linii individuale pentru claritate:
a,
td,
p.red,
div # firstred
{
culoarea rosie;
}
De ce grupați selectoarele CSS?
Gruparea selectoarelor CSS ajută la minimizarea dimensiunii foii de stil, astfel încât să se încarce mai repede Desigur, foile de stil nu sunt principalii vinovați ai încărcării lente; Fișierele CSS sunt fișiere text, deci chiar foile CSS foarte lungi sunt mici în comparație cu imaginile neoptimizate. Totuși, fiecare optimizare vă ajută și, dacă puteți elimina dimensiunea CSS și încărcați paginile mult mai repede, este un lucru bun.
Gruparea selectoarelor facilitează mult întreținerea șantierului. Dacă trebuie să faceți o modificare, puteți edita pur și simplu o singură regulă CSS în loc de mai multe reguli. Această abordare economisește timp și probleme.
Concluzia: gruparea selectorelor CSS mărește eficiența, productivitatea, organizarea și, în unele cazuri, chiar și viteza de încărcare.