Groepeer meerdere CSS-keurders om laaisnelheid te verbeter
Doeltreffendheid is 'n belangrike faktor in 'n suksesvolle webwerf. Die webwerf moet doeltreffend wees in hoe dit beelde aanlyn gebruik . Dit sal verseker dat die webwerf goed presteer vir besoekers en vinnig op hul toestelle laai . Doeltreffendheid behoort ook deel te wees van u algehele proses, om u te help om 'n webwerf se vordering op tyd en op begroting te behou.
Uiteindelik speel doeltreffendheid 'n rol in alle aspekte van die skepping van 'n webwerf en langtermyn sukses, insluitende die style wat geskryf is vir die CSS-bladsye van die webwerf. Om slanker, skoner CSS-lêers te skep, is ideaal, en een van die maniere waarop jy dit kan bereik, is om verskeie CSS-keurders saam te groepeer.
Groepering van keurders
Wanneer u CSS-keurders groepeer, pas u dieselfde style toe op verskillende elemente sonder om die style in u stylblad te herhaal. In plaas daarvan om twee of drie of selfs meer CSS-reëls te hê, wat almal dieselfde doen (byvoorbeeld, stel die kleur van iets te rooi), het jy 'n enkele CSS-reël wat vir jou bladsy behaal.
Daar is 'n aantal redes waarom hierdie "groepering van keurders" 'n bladsy bevoordeel. Eerstens sal jou stylblad kleiner wees en laai vinniger. Natuurlik is style sheets nie een van die belangrikste skuldiges wanneer dit kom by stadige laai-webwerwe nie. CSS lêers is teks lêers, dus selfs baie lang CSS velle is klein, lêer grootte wys, in vergelyking met unoptimized beelde. Tog tel elke klein bietjie, en as jy die grootte van jou CSS kan skeer en die bladsye soveel vinniger laai, is dit altyd 'n goeie ding om te doen.
Oor die algemeen is bogemiddelde laai spoed vir webwerwe minder as 3 sekondes; 3 tot 7 sekondes is gemiddeld, en meer as 7 sekondes is net te stadig. Hierdie lae getalle beteken dat om dit te bewerkstellig met u webwerf, moet u alles doen wat u kan! Dit is hoekom jy kan help om jou webwerf vinnig te laat gebruik deur gegroepeerde CSS-keurders.
Hoe om Groep CSS-keurders
Om CSS-keurders saam te voeg in u stylblad, gebruik u komma's om verskeie gegroepeerde keurders in die styl te skei . In die voorbeeld hieronder beïnvloed die styl die p- en div-elemente:
div, p (kleur: # f00; }Die komma beteken basies "en". Hierdie selector is dus van toepassing op alle paragraafelemente en alle skeidingselemente. As die komma ontbreek, sou dit eerder al paragraafelemente wees wat 'n kind van 'n afdeling is. Dit is 'n baie ander soort selector, dus hierdie komma verander regtig die betekenis van die selector!
Enige vorm van selector kan met enige ander selector gegroepeer word. In hierdie voorbeeld word 'n klas keurder gegroepeer met 'n ID selector:
p.red, #sub (kleur: # f00; }Hierdie styl is dus van toepassing op enige paragraaf met die klas eienskappe van "rooi", EN enige element (aangesien ons nie aangedui het watter soort) wat 'n ID-kenmerk van "sub" het nie.
U kan enige aantal keurders saamvoeg, insluitende keurders wat enkelwoorde en komposisiewerkers is. Hierdie voorbeeld sluit vier verskillende keurders in:
p, .red, #sub, div a: skakel {kleur: # f00; }Hierdie CSS-reël sal dus van toepassing wees op die volgende:
- Enige paragraaf element
- Enige element met die klas van "rooi"
- Enige element met 'n ID van "sub"
- Die "skakel" pseudoklas van die ankerelemente wat decendente van 'n afdeling is.
Die laaste selector is 'n saamgestelde selector. Jy kan sien dit is maklik gekombineer met die ander keurders in hierdie CSS-reël. Met die reël stel ons die kleur van # f00 (wat rooi is) op hierdie 4 keurders aan. Dit is beter om 4 afsonderlike keurders te skryf om dieselfde resultaat te behaal.
Nog 'n voordeel van die groep van keurders is dat as jy 'n verandering moet maak, jy 'n enkele CSS-reël in plaas van veelvuldige een kan wysig. Dit beteken dat hierdie benadering jou blaargewig en tyd bespaar wanneer dit kom by die handhawing van die werf in die toekoms.
Enige selector kan gegroepeer word
Soos u van bogenoemde voorbeelde kan sien, kan enige geldige selector in 'n groep geplaas word, en alle elemente in die dokument wat ooreenstem met al die gegroepeerde elemente sal dieselfde styl hê op grond van daardie styleiendom.
Sommige mense verkies om die gegroepeerde elemente op aparte lyne vir leesbaarheid in die kode te lys. Die voorkoms op die webwerf en die vragspoed bly dieselfde. Jy kan byvoorbeeld style geskei met kommas kombineer in een styl-eiendom in een reël kode:
th, td, p.red, div # firstred {kleur: rooi; }
of jy kan die style op individuele lyne duidelik maak:
ste,
td,
p.red,
div # firstred
{
kleur: rooi;
}
Enige metode wat jy gebruik om verskeie CSS-keurders te groepeer, versnel jou webwerf en maak dit makliker om style langtermyn te bestuur.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 5/8/17.