Dewisyddion CSS Lluosog Grŵp i Wella Cyflymder Llwyth
Mae effeithlonrwydd yn ffactor pwysig mewn gwefan lwyddiannus. Dylai'r safle hwnnw fod yn effeithlon o ran sut mae'n defnyddio delweddau ar-lein . Bydd hyn yn helpu i sicrhau bod y safle'n perfformio'n dda i ymwelwyr ac yn llwytho'n gyflym ar eu dyfeisiau. Dylai effeithlonrwydd hefyd fod yn rhan o'ch proses gyffredinol, gan eich cynorthwyo i gadw cynnydd y safle ar amser ac ar y gyllideb.
Yn y pen draw, mae effeithlonrwydd yn chwarae rôl ym mhob agwedd ar lwyddiant creu a hirdymor gwefan, gan gynnwys yr arddulliau sydd wedi'u hysgrifennu ar gyfer taflenni CSS y wefan honno. Mae gallu creu ffeiliau CSS blinach, glanach yn ddelfrydol, ac un o'r ffyrdd y gallwch chi gyflawni hyn yw trwy grwpio sawl detholydd CSS gyda'i gilydd.
Dewiswyr Grwpio
Pan fyddwch yn grwpio detholyddion CSS , byddwch yn defnyddio'r un arddulliau i sawl elfen wahanol heb ailadrodd yr arddulliau yn eich dalen arddull. Yn hytrach na chael dwy neu dair neu fwy o reolau CSS, mae pob un ohonynt yn gwneud yr un peth (enghraifft, gosod lliw rhywbeth i goch), mae gennych un rheol CSS sy'n cyflawni ar gyfer eich tudalen.
Mae yna nifer o resymau pam fod y "grwpiad o ddetholwyr" hwn yn elwa ar dudalen. Yn gyntaf, bydd eich dalen arddull yn llai ac yn llwytho'n gyflymach. Yn gyfaddef, nid yw taflenni arddull yn un o'r prif gosbwyr o ran safleoedd llwytho'n araf. Mae ffeiliau CSS yn ffeiliau testun, felly mae hyd yn oed taflenni CSS hir iawn yn ddoeth, yn ffeil-maint doeth, o'u cymharu â delweddau heb eu hawdurdodi. Yn dal i fod, mae pob ychydig yn cyfrif, ac os gallwch chi arafu rhywfaint o'ch CSS a llwytho'r tudalennau sy'n llawer cyflymach, mae hynny'n beth da i'w wneud bob amser.
Yn gyffredinol, mae cyflymder llwyth uwch na'r cyfartaledd ar gyfer safleoedd yn llai na 3 eiliad; Mae 3 i 7 eiliad tua'r cyfartaledd, ac mae mwy na 7 eiliad yn rhy araf. Mae'r niferoedd isel hyn yn golygu, er mwyn eu cyflawni gyda'ch safle, mae angen i chi wneud popeth y gallwch chi! Dyma pam y gallwch chi helpu i gadw'ch gwefan yn gyflym gan ddefnyddio detholwyr CSS wedi'u grwpio.
Sut i Ddewiswyr Grwpiau CSS
I grwpio detholwyr CSS gyda'i gilydd yn eich dalen arddull, byddwch yn defnyddio cwmau i wahanu detholwyr grwpio lluosog yn yr arddull. Yn yr enghraifft isod, mae'r arddull yn effeithio ar yr elfennau p a div:
div, p {lliw: # f00; }Mae'r coma yn y bôn yn golygu "a". Felly mae'r detholydd hwn yn berthnasol i holl elfennau paragraff A holl elfennau'r is-adran. Pe bai'r coma ar goll, byddai'n hytrach na phob elfen baragraff sy'n blentyn i is-adran. Mae hynny'n fath gwahanol o ddetholydd, felly mae'r coma hwn yn newid ystyr y detholydd!
Gellir grwpio unrhyw fath o ddetholydd gydag unrhyw ddewisydd arall. Yn yr enghraifft hon, mae dewiswr dosbarth wedi'i grwpio â detholydd ID:
p.red, #sub {lliw: # f00; }Felly mae'r arddull hon yn berthnasol i unrhyw baragraff â phriodoledd dosbarth "coch", ac unrhyw elfen (gan nad oeddem yn nodi pa fath) sydd â phriodoledd ID o "is".
Gallwch chi grwpio unrhyw nifer o ddetholyddion gyda'i gilydd, gan gynnwys detholwyr sy'n eiriau sengl a detholwyr cyfansawdd. Mae'r enghraifft hon yn cynnwys pedwar dewiswr gwahanol:
p, .red, #sub, div a: link {lliw: # f00; }Felly byddai'r rheol CSS hon yn berthnasol i'r canlynol:
- Unrhyw elfen baragraff
- Unrhyw elfen gyda'r dosbarth o "goch"
- Unrhyw elfen ag ID o "is"
- Y dosbarth ffug "cyswllt" o'r elfennau angor sy'n decendents o is-adran.
Mae'r dewisydd olaf hwnnw yn ddewisydd cyfansawdd. Gallwch ei weld yn hawdd ei gyfuno â'r dewiswyr eraill yn y rheol CSS hon. Gyda'r rheol honno, yr ydym yn gosod lliw # f00 (sy'n goch) ar y 4 detholydd hyn, sy'n well i ysgrifennu 4 detholydd ar wahân i gyflawni'r un canlyniad.
Mantais arall o ddewiswyr grwpio yw, os oes angen i chi newid, gallwch olygu un rheol CSS unigol yn hytrach na rhai lluosog. Mae hyn yn golygu bod yr ymagwedd hon yn arbed pwysau ac amser y dudalen pan ddaw i gynnal y safle yn y dyfodol.
Gall unrhyw ddewiswr gael ei grwpio
Fel y gwelwch o'r enghreifftiau uchod, gellir gosod unrhyw ddetholydd dilys mewn grŵp, a bydd yr holl elfennau yn y ddogfen sy'n cydweddu'r holl elfennau sydd wedi'u grwpio yn cael yr un arddull yn seiliedig ar yr arddull honno.
Mae'n well gan rai pobl restru'r elfennau wedi'u grwpio ar linellau ar wahân ar gyfer eglurder yn y cod. Mae'r ymddangosiad ar y wefan a'r cyflymder llwyth yn aros yr un fath. Er enghraifft, gallwch chi gyfuno arddulliau wedi'u gwahanu gan gwmau mewn un arddull mewn un llinell o god:
th, td, p.red, div # firstred {lliw: coch; }
neu gallwch restru'r arddulliau ar linellau unigol er mwyn eglurder:
th,
td,
p.red,
div # firstred
{
lliw: coch;
}
Mae'r naill ffordd neu'r llall rydych chi'n ei ddefnyddio i grwpio sawl detholydd CSS yn cyflymu eich safle ac yn ei gwneud yn haws i reoli arddulliau tymor hir.
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 5/8/17.