Гроуп више ЦСС селектора за побољшање брзине оптерећења
Ефикасност је важан фактор на успешној веб страници. Та страница би требало да буде ефикасна у томе како користи слике онлине . Ово ће помоћи да се страница осигура добро за посетиоце и брзо учитава на својим уређајима. Ефикасност такође треба да буде део вашег целокупног процеса, помажући вам да одржите напредак сајта на време и на буџету.
На крају, ефикасност игра улогу у свим аспектима стварања веб странице и дугорочног успеха, укључујући и стилове који су написани за ЦСС листове тог веб сајта. Могућност креирања јаснијих, чистијих ЦСС датотека је идеално, а један од начина на који то можете постићи је групирање више селектора ЦСС-а.
Селектори груписања
Када групирате селекторе ЦСС-а , примењујете исте стилове у неколико различитих елемената без понављања стилова у вашем листу стилова. Уместо да имате два или три или још више ЦСС правила, а све оне раде исту ствар (пример, поставите боју нечега на црвено), имате једно ЦСС правило које се постиже за вашу страницу.
Постоји низ разлога зашто ова "групација селектора" има корист од стране. Први оффт, ваш стилски лист ће бити мањи и учитати брже. Сигурно, стилски листови нису један од главних криваца када се ради о спорим локацијама за учитавање. ЦСС датотеке су текстуалне датотеке, тако да су чак и стварно дуги ЦСС листови мала, величина датотеке је мудра, у поређењу са неотвореним сликама. Ипак, свако мало рачуна, а ако можете обријати неку величину ЦСС-а и учитати странице које су много брже, то је увијек добра ствар.
Генерално, изнад просечних оптерећења за сајтове су мање од 3 секунде; 3 до 7 секунди је просечно, а више од 7 секунди је само споро. Ови мали бројеви значе да, како бисте их постигли са вашом страницом, морате учинити све што можете! Због тога можете помоћи у брзом коришћењу вашег сајта користећи груписане ЦСС селекторе.
Како груписати ЦСС селекторе
Да бисте групу ЦСС селектовали заједно у својој листи стилова, користите комисе да бисте раздвојили више груписаних селектора у стилу. У следећем примеру стил утиче на п и див елементе:
див, п {боја: # ф00; }Змија у основи значи "и". Дакле, овај селектор се односи на све елементе параграфа И све елементе поделе. Ако запета недостаје, уместо тога биће сви елементи параграфа који су дијете подјеле. То је врло различита врста селектора, тако да ова зареза заиста мења значење селектора!
Било који облик селектора може се груписати са било којим другим селектором. У овом примеру, селектор класа је груписан са селекционером ИД-а:
п.ред, #суб {цолор: # ф00; }Дакле, овај стил се односи на било који став са атрибутом класе "црвена", и било који елемент (будући да нисмо навели која врста) која има атрибут ИД-а "суб".
Можете да групишете било који број селектора заједно, укључујући селекторе који су појединачне речи и изборни селектори. Овај пример укључује четири различита селектора:
п, .ред, #суб, див а: линк {цолор: # ф00; }Дакле, ово ЦСС правило би се односило на следеће:
- Било који елемент параграфа
- Било који елемент са класом "црвена"
- Било који елемент са ИД-ом "суб"
- "Веза" псеудо класе сидрених елемената који су декенденти дељења.
Тај последњи селектор је сложени селектор. Можете видети да се лако комбинује са другим селекторима у овом ЦСС правилу. Са тим правилом постављамо боју # ф00 (која је црвена) на ова 4 селектора, што је пожељно писању 4 одвојена селектора да би се постигао исти резултат.
Друга предност груписања селектора је да, уколико желите да направите промену, можете едитирати једно само ЦСС правило уместо више. То значи да овај приступ штеди вам тежину и време странице када је у питању одржавање сајта у будућности.
Било који селектор може бити груписан
Као што можете видети из горе наведених примјера, сваки важећи селектор може бити смјештен у групу, а сви елементи у документу који одговарају свим групираним елементима имају исти стил на основу тог стила својства.
Неки људи више воле да наводе груписане елементе на одвојеним линијама за читљивост у коду. Изглед на сајту и брзина оптерећења остаје исти. На пример, можете комбиновати стилове одвојене командом у једну особину стила у једној линији кода:
тх, тд, п.ред, див # фирстред {цолор: ред; }
или можете навести стилове на појединачним линијама ради јасноће:
тх,
тд,
п.ред,
див # први
{
боја црвена;
}
Било који метод који користите за груписање више ЦСС селектора убрзава вашу локацију и олакшава управљање стиловима дугорочно.
Оригинални чланак Јеннифер Кринин. Уредио Јереми Гирард на 5/8/17.