Grupp Multiple CSS Selectors fir d'Luede vu Geschwindegkeeten ze verbesseren
Effizienz ass e wichtege Faktor bei enger erfollegräicher Websäit. Dëse Site sollt effizient an d' Art a Weis wéi et Biller online benotzt . Dëst wäert hëllefen, datt de Site gutt fir Gäscht kënnt a séier op hir Geräter ze liesen. Effizienz ass och e Deel vun Ärem Gesamtproblem, fir Iech ze hëllefen fir de Fortschrëtt de Site ze gutt an um Budget ze halen.
Am Endeffekt spillt d'Effizienz eng Roll zu allen Aspekter vun der Schafung vun enger Websäit a laangfristeg Erfolleg, och a Stiler déi fir dëse CSS Blieder geschriwwe sinn. Mäerder kënne méi schlau ginn, méi sauber CSS-Dateien ass ideal, an eng vun de Weeër Dir kënnt dëst erreechen duerch Gruppéierunge vu CSS-Selektoren zesummen.
Gruppéierter
Wann Dir Grupp CSS Selektoren gréisst, hutt Dir déi selwecht Stiler op verschiddene verschiddene Elementer opginn, ouni d'Stiler an Ärem Stylblat ze widderhuelen. Anstatt datt zwee oder dräi oder méi CSS Regele sinn, déi all déiselwecht Saache maachen (z. B. d'Faarwen vun eppes zu rout maachen), hutt Dir eng eenzeg CSS Regel, déi fir Är Säit erreechen kënnt.
Et ginn e puer Ursaachen firwat dës "Gruppéierung vu Selektoren" eng Säit maacht. Éischt Offert, är Stylstick gëtt méi kleng a luedt méi séier. Awer iwwregens, Stilblieder si net een vun den Haaptgrouwen, wann et drëm geet fir luesen Ladenplazen z'erreechen. CSS Dateien sinn Textdateien, souguer wierklech laang CSS Blieder sinn kleng, file-size wise, am Verglach mat onoptiméierter Biller. Awer, all kleng zielt, a wann Dir eng Gréisst vun Ärem CSS raséiere kann an d'Säiten déi vill méi séier liesen, dat ass ëmmer eng gutt Saach fir ze maachen.
Am Allgemengen sinn d'Duerchschnëttslaststéiss fir Siten manner wéi 3 Sekonnen; 3 bis 7 Sekonnen ass ongeféier, méi wéi 7 Sekonnen ass ze lues. Dës niddereg Zuelen bedeit datt Dir mat Ärer Säit z'erreechen, musst Dir alles maachen wat Dir maache kënnt! Dofir kënnt Dir Är Site séier mat gruppéierten CSS Selektoren halen.
Wéi eng Grupp CSS Selectors
Fir CSS Selektiounsgrupp zesummenzebréngen, kënnt Dir Är Kommanden benotzen fir verschidde gruppeg Selecturen am Stil ze trennen . Am Beispiel hei ënnendrënner de Stil op den p an div Elementen:
div, p {color: # f00; }}De Comma ass haaptsächlech "a". Also dee Wieltelalter gëlt fir all Paragraf Elementer AND all Divisiounen Elementer. Wann de Comma fehlt, ass et awer all Paragraf Elementer déi e Kand vun enger Divisioun sinn. Dat ass eng ganz aner Zort vu selector, sou datt dësen Comma wierklech d'Bedeitung vum Selektor ännert!
All Form vu Selektioun kann mat engem anere Wähler gruppéiert ginn. An dësem Beispill ass e Klassekalektor mat engem ID-Selektor gruppéiert ginn:
p.red, #sub {color: # f00; }}Also dëse Stil gëlt fir all Paragrapze mat dem Klassattribut vun "roude", AN all Element (well mir keng spezifizéierter Aart) déi e Identifikaart vun "Ënn" huet.
Dir kënnt eng Grupp vu verschiddenen Ziler zesummen zesummegesat, dorënner Selektoren déi eenzel Wierder a Computertelefone sinn. Dëst Beispill beinhalt mat véier verschiddene Selektoren:
p, .red, #sub, div a: Link {color: # f00; }}Also dës CSS Regel géif gëllen:
- All Paragraf Element
- All Element mat der Klass vu "roude"
- All Element mat enger ID vun "Ënn"
- D'"Link" Pseudo-Klass vun den Ankerelementer déi decendent vun enger Divisioun sinn.
Dat lescht Selector ass en Computere selector. Dir kënnt gesinn, datt et einfach mat den anere Selecturen an dëser CSS Regel kombinéiert ginn. Mat dëser Regel bewierken d'Faarwen vun # f00 (dat ass rout) op dësen 4 Selektoren, déi et besser wier fir 4 getrennte Selektoren ze schreiwen fir dasseleg Resultat ze erreechen.
Een anere Benefice vun Gruppéierungsoptreegelen ass datt wann Dir eng Changement maache musst, da kënnt Dir eng eenzeg CSS Regel anstatt e puer Mataarbechter änneren. Dëst bedeit datt dës Approche Dir fannt d'Gewiicht an d'Zäit wann et ëm d'Zukunft ass.
All Wähler Gruppéiren
Wéi Dir aus dësen Exemplaren kuckt, kann all gültege Selektor an enger Grupp plazéiert ginn, an all Elementer am Dokument, déi all déi gruppéiert Elementer passen, hunn de selwechten Stil op dëser Eigentell.
Verschidde Leit preferéieren d'gruppéiert Elementer op eenzel Seilen fir d'Lieserlechkeet am Code. D'Erscheinung op der Websäit an d'Laascht ass d'selwecht. Dir kënnt zum Beispill verschidde Stile kombinéieren, déi vu Komma getrennt sinn an enger Stilsimmkeet an enger Linn vu Code:
th, td, p.red, div # firstred {color: red; }}
oder Dir kënnt d'Styles op eenzelne Linnen fir Klarheet listen:
, an
td,
p.red,
div # firstred
{
Faarf: rout;
}}
Entweder Methode déi Dir benotzt fir verschidde CSS Selektiounsgruppen ze gruppéieren beschleunegt Är Site a maacht et méi einfach, Stiler langfristeg ze verwalten.
Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard op 5/8/17.