Група некалькі CSS селектары, каб палепшыць хуткасць загрузкі
Эфектыўнасць з'яўляецца важным фактарам паспяховага сайта. Гэты сайт павінен быць эфектыўным ў тым , як ён выкарыстоўвае выявы ў Інтэрнэце . Гэта дапаможа гарантаваць , што сайт працуе добра для наведвальнікаў і хутка загружаць на свае прылады. Эфектыўнасць павінна таксама быць часткай агульнага працэсу, дапамагаючы вам падтрымліваць прагрэс на сайце па часе і па бюджэце.
У рэшце рэшт, эфектыўнасць гуляе ролю ва ўсіх аспектах поспеху стварэння і доўгатэрміновага вэб-сайта, у тым ліку і ў стылях, якія напісаны для CSS лісты сайта. Будучы ў стане стварыць кампактней, больш чыстых CSS файлаў з'яўляецца ідэальным, і адзін з спосабаў, вы можаце дасягнуць гэтага шляхам групавання некалькіх селектараў CSS разам.
групоўка селектараў
Пры групоўцы CSS селектары , прымяніць тыя ж стылі да некалькім розным элементам , ня паўтараючы стылі ў табліцы стыляў. Замест таго, каб два ці тры ці нават больш правілы CSS, якія ўсё робяць тое ж самае (напрыклад, усталяваць колер нешта на чырвонае), у вас ёсць адно правіла CSS, якія выконвай для вашай старонкі.
Ёсць цэлы шэраг прычын, чаму гэта «групоўка селектараў» прыносіць карысць старонкі. Па-першае offt, ваш стыль ліст будзе менш і загружаецца хутчэй. Праўда, табліцы стыляў не адзін з галоўных вінаватых, калі гаворка ідзе пра Павольная загрузка сайтаў. CSS-файлы ўяўляюць сабой тэкставыя файлы, так што нават вельмі доўгія CSS лісты малюсенькія, памер файл мудры, у параўнанні з неоптимизированными малюнкамі. Тым не менш, кожны маленькі біт падлічвае, і калі вы можаце галіць некаторы памер вашага CSS і нашмат хутчэй загружаць старонкі, што гэта заўсёды добрая рэч, каб зрабіць.
Увогуле, вышэй сярэдняй хуткасці загрузкі для сайтаў менш чым за 3 секунды; 3 да 7 секунд аб сярэдняй, і больш за 7 секунд проста занадта павольна. Гэтыя нізкія колькасці азначаюць, што для дасягнення іх з вашым сайтам, вы павінны зрабіць усё магчымае! Менавіта таму вы можаце дапамагчы захаваць ваш сайт хуткі выкарыстоўваючы згрупаваных CSS селектары.
Як Group CSS селектараў
Групоўка CSS селектары разам у табліцы стыляў, вы ўжывайце коскі для падзелу некалькіх згрупаваных селектараў у стылі. У прыведзеным ніжэй прыкладзе, стыль ўплывае на р і дзіваў элементы:
Дзіў, р {колер: # f00; }Коска ў асноўным азначае «і». Такім чынам, гэты селектар прымяняецца да ўсіх элементаў абзаца і ўсе элементы падзелу. Калі коска адсутнічае, то замест гэтага будуць усе элементы абзаца, якія з'яўляюцца даччыным падраздзяленнем. Гэта зусім іншы выгляд селектара, так што коска сапраўды змяніць значэнне селектара!
Любыя формы селектара можа быць згрупаваны з любым іншым селектарам. У дадзеным прыкладзе селектар класа згрупаваны з селектарам ID:
p.red, #sub {колер: # f00; }Так што гэты стыль ставіцца да любога пункце з атрыбутам класа «чырвоных», і любы элемент (так як мы не паказалі, які тып), які мае атрыбут ID з «суб».
Вы можаце згрупаваць любую колькасць селектараў разам, у тым ліку селектараў, якія з'яўляюцца асобнымі словамі і compund селектары. Гэты прыклад ўключае ў сябе чатыры розных селектараў:
р, .red, #sub, дзіў на: сувязь {колер: # f00; }Такім чынам, гэта правіла CSS будзе прымяняцца да наступнага:
- Любы пункт элемент
- Любы элемент з класам «чырвоны»
- Любы элемент з ідэнтыфікатарам «суб»
- «Спасылка» псеўда клас элементаў прывязкі, якія з'яўляюцца decendents з падзелу.
Гэты апошні селектар з'яўляецца селектарам злучэння. Вы можаце бачыць, што гэта лёгка спалучаецца з іншымі селектараў у гэтым правіле CSS. З гэтым правілам, мы ўсталёўваем колер # f00 (які з'яўляецца чырвоным) на гэтых 4 селектараў, што пераважней пісаць 4 асобныя селектары для дасягнення таго ж выніку.
Яшчэ адным перавагай групоўкі селектараў з'яўляецца тое, што, калі вам трэба ўнесці змены, вы можаце рэдагаваць адзін адно правіла CSS замест некалькіх з іх. Гэта азначае, што такі падыход эканоміць вага старонкі і час, калі справа даходзіць да падтрымання сайта ў будучыні.
Любы селектар можа быць згрупаваны
Як відаць з прыведзеных вышэй прыкладаў, любы сапраўдны селектар можа быць змешчаны ў групе, і ўсе элементы ў дакуменце, якія адпавядаюць усім згрупаваных элементам будуць мець адзін і той жа стыль, заснаваныя на гэтым ўласцівасці стылю.
Некаторыя людзі аддаюць перавагу пералічваць згрупаваныя элементы на асобных лініях для пераборлівасці ў кодзе. З'яўленне на сайце і хуткасць загрузкі застаецца нязменным. Напрыклад, вы можаце камбінаваць стылі, падзеленыя коскамі ў адно ўласцівасць стылю ў адным радку кода:
га, тд, p.red, отд # firstred {колеру: чырвоны; }
ці вы можаце пералічыць стылі на асобныя лініі для яснасці:
га,
тд,
p.red,
DIV # firstred
{
колер: чырвоны;
}
Любы метад выкарыстоўваецца для аб'яднання некалькіх селектараў CSS паскарае свой сайт і зрабіць яго больш лёгкім для кіравання стылямі ў доўгатэрміновай перспектыве.
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 5/8/17.