Mitme CSS-valija rühmitamine

Grupi mitu CSS-i valikut, et parandada koormuskiirust

Edukas veebisait on oluline tegur. See veebisait peaks olema tõhus veebis piltide kasutamisel . See aitab tagada, et sait kasutab külastajaid hästi ja oma seadmeid kiiresti laadima . Tõhusus peaks samuti olema osa teie üldisest protsessist, mis aitab teil hoida saidi edusamme õigeaegselt ja eelarvega.

Lõppude lõpuks mõjutab tõhusus veebisaidi loomise ja pikaajalise edu kõiki aspekte, sealhulgas selle saidi CSS-lehtede jaoks koostatud stiilides. Võimalus luua lihtsamad ja puhtamad CSS-failid on ideaalne, ja üks võimalus selle saavutamiseks on rühmitada mitu CSS-valijat koos.

Rühmitamise valijad

Kui grupite CSS-valijaid , rakendate samu stiile mitmele erinevale elemendile ilma stiililehe stiile uuesti korrata. Selle asemel, et teil on kaks või kolm või veelgi rohkem CSS-i reegleid, mis kõik mõjutavad ühte ja sama asja (näiteks määrake punase värvi), on teil oma lehe jaoks üks CSS-reegel.

Sellel "selektorite rühmal" lehel on mitmeid põhjuseid. Esiteks on teie stiilide leht väiksem ja laadimine kiirem. On tõsi, et stiililehed ei ole üks peamisi süüdlasi, kui tegemist on aeglaste laadimisaladega. CSS-failid on tekstifailid, nii et isegi tõesti pikad CSS-lehed on väikesed failisuurused, võrreldes optimeerimata piltidega. Ikka veel iga natuke loeb, ja kui saate oma CSS-i mõnevõrra raseerida ja laadida palju kiiremini lehti, on see alati hea asi teha.

Üldiselt on saidide keskmiste keskmiste koormuskiiruste arv alla 3 sekundit; 3-7 sekundit on umbes keskmiselt ja üle 7 sekundi on liiga aeglane. Need väikesed arvud tähendavad seda, et nende saidi saavutamiseks peate tegema kõik endast oleneva! Sellepärast saate aidata saidil kiirelt kasutada rühmitatud CSS-valijaid.

Kuidas CSS-i valijaid grupeerida

CSS-valijate rühmitamiseks oma stiililehtedes kasutate komakte, et eraldada rühmitatud valijaid stiilis. Allpool toodud näites mõjutab stiil p ja div elemente:

div, p {värv: # f00; }

Koma tähendab enamasti "ja". Nii et see valija kehtib kõikide paragrahvide JA kõikide jagamise elementide kohta. Kui koma puudus, oleksid selle asemel kõik lõikeosad, mis on jagunemise laps. See on väga teistsugune valija, nii et see koma muudab selektori tähendust!

Igasugust selektorit saab rühmitada mis tahes muu valijaga. Selles näites liigitatakse klassi valija ID-valijaga:

p.red, #sub {color: # f00; }

Seega kehtib see stiil mis tahes lõikega, mille klassi atribuut on "punane", JA ükskõik millist elementi (kuna me ei täpsusta, millist tüüpi) on ID-atribuut "alam".

Saate rühmitada mis tahes hulga valijaid koos, kaasa arvatud selektorid, mis on üksikud sõnad ja kompuutrite valijad. See näide sisaldab nelja erinevat valijat:

p, .red, #sub, div a: link {color: # f00; }

See CSS-reegel kehtib järgmiselt:

See viimane valija on ühendi valija. Näete, et see on hõlpsasti ühendatud teiste selle CSS-reegli valijatega. Selle reegli abil seadistame need 4 valijat värvi # f00 (mis on punane), mis on eelistatult sama tulemuse saamiseks 4 eraldi valijat kirjutades.

Valijatena rühmitamise teine ​​eelis on see, et kui peate muudatusi tegema, saate redigeerida ühe CSS-i reegli, mitte mitut neist. See tähendab, et see lähenemisviis salvestab teie lehe kaalu ja aja, kui soovite säilitada saidi tulevikus.

Iga valija võib grupeerida

Nagu näete ülalolevatest näidetest, saab gruppi paigutada mõnda kehtivat valijat ja kõik elemendid dokumendis, mis vastavad kõigile grupeeritud elementidele, on sama stiilil, tuginedes selle stiili varale.

Mõned inimesed eelistavad kodeeritud elementide loendit loetleda eraldi read, et see oleks loetav. Veebilehe välimus ja koormuskiirus jäävad samaks. Näiteks võite kombineerida komadega eraldatud stiilid ühe koodi rida ühe stiilis vara juurde:

th, td, p.red, div # firstred {värv: punane; }

või saate loetleda stiilid üksikute readide selguse huvides:

th,
td
p.red
div # esimest korda
{
värv: punane;
}

Mõlemal meetodil, mida kasutate mitmete CSS-valijate grupeerimiseks, kiirendatakse teie saiti ja lihtsam hallata stiile pikaajaliselt.

Jennifer Krynini algne artikkel. Redigeeris Jeremy Girard 5./8/17.