Sameina marga CSS Selectors til að bæta álagshraða
Skilvirkni er mikilvægur þáttur í árangursríkri vefsíðu. Þessi síða ætti að vera skilvirk í því hvernig hún notar myndir á netinu . Þetta mun hjálpa til við að tryggja að vefsvæðið virki vel fyrir gesti og hlaða fljótt á tækin sín. Skilvirkni ætti einnig að vera hluti af heildarferlinu þínu, sem hjálpar þér að halda framvindu síðunnar á réttum tíma og á fjárhagsáætlun.
Að lokum skilar skilvirkni hlutverk í öllum þáttum stofnunar vefsíðu og langtíma árangur, þ.mt í stílum sem eru skrifaðar fyrir CSS skjölin á síðunni. Að geta búið til sléttari, hreinni CSS skrár er tilvalin og einn af þeim leiðum sem þú getur náð þessu er með því að sameina marga CSS selectors saman.
Flokkun veljari
Þegar þú flokkar CSS-valmöguleika , beitir þú sömu stílum við nokkra mismunandi þætti án þess að endurtaka stílin í stílblaðinu þínu. Í stað þess að hafa tvö eða þrjú eða jafnvel fleiri CSS reglur, sem allir gera það sama (td settu lit á eitthvað að rauðum), þá hefur þú eina CSS reglu sem ná fram fyrir síðuna þína.
Það eru ýmsar ástæður fyrir því að þetta "hópur valræðinga" biður síðu. Í fyrsta lagi mun stíllinn þinn vera minni og hlaða hraðar. Að sjálfsögðu eru stílblöð ekki einn af helstu sökudólgum þegar kemur að því að hægt sé að hlaða inn síðum. CSS skrár eru textaskrár, svo jafnvel mjög langar CSS blöð eru litlar, skráarstærðvísir, þegar borið er saman við óstillanlegar myndir. Samt sem áður telur hver lítill hluti, og ef þú getur rakið stærð CSS þinnar og hlaðið síðurnar miklu hraðar, þá er það alltaf gott að gera.
Almennt eru hærri en meðalhraði fyrir síður minna en 3 sekúndur; 3 til 7 sekúndur eru um að meðaltali og meira en 7 sekúndur er bara of hægur. Þessir litlu tölur þýða að þú þarft að gera allt sem þú getur til að ná þeim með síðuna þína. Þetta er ástæðan fyrir því að þú getur hjálpað til við að halda vefsvæðinu þínu skjótum með því að nota flokka CSS.
Hvernig á að hóp CSS Selectors
Til að hópa CSS-vali saman í stílblaðinu notarðu kommu til að aðgreina marga hópa sem eru valin í stíl. Í dæminu hér fyrir neðan hefur stíllinn áhrif á p og div atriði:
div, p {color: # f00; }Auglýsingin þýðir í grundvallaratriðum "og". Þannig gildir þetta val á öllum liðareiningum og öllum deildarþáttum. Ef kommu vantaði, myndi það í staðinn vera öll málsgreinar sem eru barn í deild. Það er mjög mismunandi tegund af vali, svo þetta kommu þýðir í raun að breyta merkingu valsins!
Hvort sem er valið getur verið flokkað með öðrum vali. Í þessu dæmi er flokkur valinn flokkaður með auðkenni val:
p.red, #sub {litur: # f00; }Þannig gildir þessi stíll á hvaða málsgrein sem er með bekknum eiginleiki af "rauðum" og einhverjum þáttum (þar sem við tilgreindum ekki hvaða tegund) sem hefur kennitölu "sub".
Þú getur hópað hvaða fjölda keisara sem er saman, þar á meðal valsmenn sem eru einföld orð og samsvörunarmenn. Þetta dæmi inniheldur fjórar mismunandi valsmenn:
p, .red, #sub, div a: hlekkur {lit: # f00; }Svo þessi CSS regla myndi gilda um eftirfarandi:
- Allir liðarþættir
- Einhver þáttur með bekknum "rauður"
- Einhver þáttur með auðkenni "undir"
- The "hlekkur" gervi bekknum af akkeri frumefni sem eru decendents af deild.
Þessi síðasti valbúnaður er samsettur valbúnaður. Þú getur séð að það er auðvelt að sameina við aðra valið í þessari CSS reglu. Með þeirri reglu settum við litina # f00 (sem er rauð) á þessum 4 valsum, sem er æskilegt að skrifa 4 aðskilda valar til að ná sama niðurstöðu.
Annar ávinningur af að velja hópa er að ef þú þarft að breyta, getur þú breytt einum CSS reglu í stað margra. Þetta þýðir að þessi aðferð sparar þér þyngd og tíma þegar kemur að því að viðhalda síðunni í framtíðinni.
Allir valir geta verið flokkaðir
Eins og sjá má af ofangreindum dæmum er hægt að setja alla gilda val í hóp og allar þættir í skjalinu sem passa við öll flokkað atriði munu hafa sömu stíl byggð á þeirri stíll eign.
Sumir kjósa að skrá hópþætti á sérstökum línum til að lesa í kóðanum. Útlitið á vefsíðunni og álagshraðanum er það sama. Til dæmis getur þú sameinað stíl sem er aðskilin með kommum í eina stíl eign í einum línu af kóða:
th, td, p.red, div # firstred {litur: rauður; }
eða þú getur listað stílin á einstökum línum til að fá skýrleika:
th,
td,
p.red,
div # firstred
{
litur: rauður;
}
Annaðhvort aðferð sem þú notar til að flokka marga CSS-valmöguleika hraðar vefsíðunni þinni og auðveldar þér að stjórna stíl til lengri tíma litið.
Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard á 5/8/17.