Групови няколко CSS селектора за подобряване на скоростта на зареждане
Ефективността е важен фактор в успешния уебсайт. Този сайт трябва да бъде ефективен в начина, по който той използва изображенията онлайн . Това ще спомогне за това сайтът да се представя добре за посетителите и да се зарежда бързо на техните устройства. Ефективността също трябва да бъде част от цялостния ви процес, което ви помага да поддържате напредъка на сайта навреме и по бюджет.
В крайна сметка ефикасността играе роля във всички аспекти на създаването на уебсайт и дългосрочния успех, включително в стиловете, които са написани за CSS листата на този сайт. Създаването на по-чисти, по-чисти CSS файлове е идеално и един от начините, по които можете да постигнете това, е да групирате няколко CSS селектора заедно.
Групиране на селектори
Когато групирате селекторите за CSS , прилагате същите стилове на няколко различни елемента, без да повтаряте стиловете в стиловия лист. Вместо да имате две или три или повече правила за CSS, които правят едно и също нещо (например, задайте цвета на нещо в червено), имате едно правило за CSS, което постига за вашата страница.
Има редица причини, поради които това "групиране на селектори" е от полза за страница. На първо място, стиловата ви листа ще бъде по-малка и ще се зарежда по-бързо. Разбира се, листовете за стилове не са един от основните виновници, когато става дума за бавни места за зареждане. CSS файловете са текстови файлове, така че дори и наистина дългите CSS листове са малки, с размери на файловете мъдър, в сравнение с неоптимизирани изображения. И все пак, всеки малък брой се брои, и ако можете да обръсне размера на CSS и да заредите страниците много по-бързо, това винаги е добре да направите.
Като цяло, над средната скорост на зареждане за сайтове са по-малко от 3 секунди; 3 до 7 секунди е средно и повече от 7 секунди е твърде бавен. Тези ниски числа означават, че за да ги постигнете със сайта си, трябва да направите всичко възможно! Ето защо можете да помогнете за поддържането на сайта си бързо, като използвате групирани селектори на CSS.
Как да групирате CSS селектори
За да групирате селекторите на CSS заедно в стиловия лист, използвайте запетаи, за да разделите множество групирани селектори в стила. В примера по-долу стилът влияе върху елементите p и div:
div, p {цвят: # f00; }Запетаята означава "и". Така че този селектор се отнася за всички елементи на абзаца И всички елементи на разделянето. Ако запетайката липсваше, вместо това щяха да бъдат всички елементи на абзаца, които са дете на разделение. Това е много различен тип селектор, така че тази запетая наистина променя значението на селектора!
Всяка форма на селектор може да бъде групирана с всеки друг селектор. В този пример селекторът на класа е групиран със селектор на идентификатори:
p.red, #sub {цвят: # f00; }Така че този стил се отнася за всеки параграф с атрибута на класа "червен" И всеки елемент (тъй като не сме посочили какъв вид) има идентификационен атрибут на "под".
Можете да групирате кой да е брой селектори заедно, включително селектори, които са единични думи и селектори за компилации. Този пример включва четири различни селектора:
p, .red, #sub, div a: връзка {цвят: # f00; }Така че това правило за CSS се отнася за следното:
- Всеки параграф елемент
- Всеки елемент с класа на "червено"
- Всеки елемент с идентификатор на "под"
- Псевдокласът на "връзката" на елементите на котвата, които са дециденти на разделение.
Този последен селектор е комбиниран селектор. Можете да видите, че той лесно се комбинира с другите селектори в това правило за CSS. С това правило задаваме цвета на # f00 (който е червен) на тези 4 селектора, за предпочитане е да напишете 4 отделни селектора, за да постигнете същия резултат.
Друго предимство на групирането на селектори е, че ако трябва да направите промяна, можете да редактирате едно правило CSS вместо няколко. Това означава, че този подход ви спестява тегло и време на страницата, когато става въпрос за поддържане на сайта в бъдеще.
Всеки селектор може да бъде групиран
Както можете да видите от горните примери, всеки валиден селектор може да бъде поставен в група и всички елементи в документа, които съвпадат с всички групирани елементи, ще имат същия стил въз основа на тази собственост на стил.
Някои хора предпочитат списъкът на групираните елементи да бъдат изброени на отделни линии за четливост в кода. Появата на сайта и скоростта на зареждане остават същите. Можете например да комбинирате стилове, разделени със запетаи, в собственост на един стил в един ред от код:
th, td, p.red, div # firstred {цвят: червен; }
или можете да посочите стиловете на отделни линии за яснота:
тата,
TD,
p.red,
Разделение # firstred
{
цвят: червен;
}
Всеки от методите, които използвате, за да групирате няколко CSS селектора, ускорява вашия сайт и улеснява управлението на стиловете в дългосрочен план.
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 5/8/17.