Када групишете ЦСС селекторе, примените исте стилове на неколико различитих елемената без понављања стилова у табели стилова. Уместо да имате два, три или више ЦСС правила која раде исту ствар (на пример, боју нечега поставите на црвену), користите једно ЦСС правило које постиже исту ствар. Тајна ове тактике за повећање ефикасности је зарез.
Како груписати ЦСС бираче
Да бисте груписали ЦСС бираче у табелу стилова, користите зарезе за одвајање више груписаних бирача у стилу. У овом примеру, стил утиче на елементе п и див:
див, п {боја: # ф00; }
У овом контексту, зарез значи „и“, тако да се овај бирач односи на све елементе пасуса и све елементе поделе. Ако зарез недостаје, селектор би се уместо тога применио на све елементе пасуса који су подређени одељењу. То је друга врста селектора, па је зарез важан.
Можете груписати било који облик селектора са било којим другим селектором. Овај пример групише селектор класе са селектором ИД-а:
п.ред, #суб {цолор: # ф00; }
Овај стил се односи на било који пасус са атрибутом класе од црвена и било који елемент (јер врста није наведена) са ИД атрибутом под.
Можете да групишете било који број бирача, укључујући бираче који су појединачне речи и сложене бираче. Овај пример укључује четири различита селектора:
п, .црвена, #суб, див а: линк {цолор: # ф00; }
Ово ЦСС правило би се односило на:
- Било који елемент пасуса
- Било који елемент класе црвена
- Било који елемент са ИД-ом под
- Тхе линк псеудо класа сидрених елемената који су потомци одељења.
Тај последњи селектор је сложени селектор. Као што је приказано, лако се комбинује са осталим селекторима у овом ЦСС правилу. Правило поставља боју # ф00 (црвено) на ова четири селектора, што је пожељније од писања четири одвојена селектора да би се постигао исти резултат.
Било који селектор може бити груписан
Можете да ставите било који важећи селектор у групу и сви елементи у документу који се подударају са свим груписаним елементима имаће исти стил на основу тог својства стила.
Неки дизајнери радије наводе груписани елементи на одвојеним редовима ради читљивости у коду. Изглед на веб локацији и брзина учитавања остају исти. На пример, стилове одвојене зарезима можете комбиновати у једно својство стила у једном реду кода:
тх, тд, п.ред, див # фирстред {цолор: ред; }
или за прегледност можете навести стилове у појединачним редовима:
тх,
тд,
п.ред,
див # фирстред
{
боја црвена;
}
Зашто групирати ЦСС селекторе?
Груписање ЦСС селектора помаже вам да смањите величину табеле стилова тако да се учитава брже Додуше, табеле стилова нису главни кривци за споро учитавање; ЦСС датотеке су текстуалне датотеке, па су чак и врло дуги ЦСС листови сићушни у поређењу са неоптимизираним сликама. Ипак, сваки делић оптимизације помаже, а ако можете обрисати неку величину са ЦСС-а и учитати странице много брже, то је добра ствар.
Груписање селектора такође олакшава одржавање локације. Ако требате да направите промену, можете једноставно да уредите једно ЦСС правило уместо више њих. Овакав приступ штеди време и гњаважу.
Закључак: Груписање ЦСС селектора повећава ефикасност, продуктивност, организацију, ау неким случајевима чак и брзину учитавања.