Hvernig á að hámarka afhendingu CSS – 7 einföld skref

css hagræðingar vektor myndFarnir eru dagarnir þegar hönnunarfræðingar og leiðandi bloggarar mæltu með að smíða vefsíður ekki nema 30 kílóbæti…


Aftur á móti var búist við að þetta „loki“ tæki HTML, JavaScript, myndir, CSS og Flash. Við skulum vera heiðarleg, það þarf ekki mikið til að fara yfir 30 kb.

Þar sem JavaScript og CSS náðu vinsældum varð það algengt að CSS einn fór yfir 30 kB loftið. Þetta á sérstaklega við um stærri vefsíður.

Hins vegar ættir þú ekki að vera of einbeittur á „kilobyte count“ þínu þegar þú smíðar og hannar síður fyrir vefsíðuna þína. Það er mikilvægt að geyma síðurnar þínar bjartsýni og þétt þegar þú skrifar CSS þinn.

Hagræðing snýst ekki bara um að lágmarka stærð skráanna. Þetta snýst um að halda síðunum þínum lausum við ringulreið og uppþembu, gera þær eins skipulagðar og skilvirkar og mögulegt er. Þegar þú lærir meira um bestu starfshætti CSS hagræðingar muntu komast að því að þú býrð sjálfkrafa til minni skráarstærðir.

Hér eru 5 einfaldir hlutir sem þú getur gert til að hámarka CSS núna.

Hvernig á að hámarka CSS afhendingu

1. Notaðu Shorthand

Að skrifa í stuttu máli er orðið mjög algeng venja. Þetta er lang einfaldasta leiðin til að minnka kóðann þinn og hversu langan tíma það tekur þig að kóða. Ef þú ert ekki að gera þetta enn þá er enginn tími eins og nútíminn.

css letureign

Það eru fjölmargir þættir sem þú getur notað styttu til en algengustu eru:

  • Framlegð
  • Padding
  • Leturgerð
  • Útlínur
  • Landamæri
  • Bakgrunnur
  • Listastíll

styttur config gildiÞú getur líka sameinað gildi með því að nota styttu. Með því að tilgreina mismunandi gildi mun vafrinn í raun nota tiltekinn hátt til að túlka reglurnar.

Notkun allra stuttra vilja gera heildarkóðann þinn mun nákvæmari. Þú ert að vista bæði stafi og línur.

Ef þú notar styttu á öllum mögulegum svæðum getur það dregið verulega úr heildar skráarstærð.

2. Losaðu þig við járnsögin

þ.e. css reglaTil að þjóna IE-sértækum CSS-reglum, með því að nota skilyrt CSS-járnsög, gefur þér þann ávinning að þjóna minni og hreinni sjálfgefnu CSS-skrá.

Það hjálpar við vafra sem eru í meira samræmi við staðla. Hins vegar verður viðbótarþyngdin aðeins sótt af þeim vöfrum sem þess þurfa.

Ef þú verður að nota hakk er mikilvægt að kóðinn sem þú notar sé sértækur fyrir útgáfu Internet Explorer sem þú ert einbeittur að.

Það eru fjölmörg fyrirfram skrifuð kóða sem þjóna sem járnsög ef þú vilt ekki skrifa þína eigin. Taktu bara tíma til að skoða raunverulega fyrirfram skrifaða kóðann og ganga úr skugga um að hann sé réttur annars gæti þetta leitt til enn meiri vandamála.

Nú, ef þú getur notað CSS til að ná þeim árangri sem þú óskar, gerðu það án þess að hafa nein járnsög. Auðvitað er þetta háð því að allt annað sé jafnt. Heildarkóði þinn verður mun léttari og einfaldari þegar þú notar færri járnsög á síðuna þína.

3. Vertu snjall við notkun Whitespace

Fyrir CSS kóðann þinn, hvítu er mikilvægt fyrir læsileika.

Whitespace inniheldur þætti, svo sem flipa, rými og aukalínur. Sérhver hluti af svigrúmi sem þú ert fær um að útrýma er svipaður og að útrýma persónu.

fjarlægja tómar línurHins vegar er oft ekki mælt með því að skippa á hvítum svigrúmi fyrir minni skrá. Þú þarft samt að viðhalda hámarks læsileika á vefsíðunum þínum.

Whitespace er mikilvægt fyrir snið, svo þú vilt finna jafnvægi. Ef þú skrifar í stórum reitum í texta til að útrýma einhverjum svigrúmi, stuttur athygli span lesenda á internetinu mun láta þá smella burt.

Ein leið til að bjóða upp á minni skráarstærð og læsileika er að skurða flipa og setja aðeins eina línu á milli málsgreina. Þetta veitir nægjanlegan svigrúm frá læsileika sjónarmiði, en það útrýmir einnig einhverjum af þessum hvítum svigrúmi sem er ekki nauðsynlegur.

Nú, fyrir framleiðsluútgáfu CSS skráarinnar þinnar, geturðu fjarlægt hvítu svæðið. Það mun enn vera til staðar í vinnuskránni þinni.

Þetta er önnur leið til að málamiðlun þannig að þú hafir bæði minni skrár og læsilegt snið.

4. Sniðið endurstillingar og ramma

Þegar þú ert að nota CSS ramma er mikilvægt að þú skoðir skjölin.

Það er jafn mikilvægt að skoða hverja einustu línu sem er innan CSS skjalanna þinna. Stundum muntu uppgötva að það eru nokkrar reglur innan ramma sem þú vilt ekki fyrir núverandi verkefni. Þetta er hægt að fjarlægja.

fjarlægt ónotaðar CSS reglur

Þú gætir komist að því að þú getur náð framsetningarlegum smáatriðum á nákvæmari og glæsilegri hátt …

Þetta er kannski ekki það sem þú notar venjulega, en ef það virkar getur þetta gert ráð fyrir hreinni umgjörð. Þegar þú veist um þau hjálpar þetta þér einnig að forðast óviljandi afrit af reglusettum.

Sömu upplýsingar eiga einnig við um endurstillingu. Þegar þú notar endurstillingar hjálpa þeir við að hlutleysa sjálfgefinn stíl vafra. Ef þú þekkir vefsíðuna sem þú ert að búa til er ekki óalgengt að finna ákveðnar yfirlýsingar sem þú veist að þú munt ekki þurfa.

Til dæmis, á almennu bloggi, muntu líklega ekki nota þau. Losaðu þig við allt það sem þú þarft ekki fyrir þá sérstöku síðu sem þú ert að byggja. Þú getur tryggja betri hagræðingu í starfi þegar þú notar sett af reglum varðandi endurstillingu eða umgjörð.

Hins vegar ætti það ekki að vera samþykkt í sjálfgefnu ástandi þeirra. Til að halda CSS skrám þínum læsilegum og halla skaltu skoða hverja yfirlýsingu fyrir sig og skera niður þær sem eru óþarfar.

5. Framtíðar-sönnun CSS þinn

Setningafræði Css

Annar gagnlegur CSS fínstillingarvalkostur: aðskildu meirihluta reglnanna þinna frá skipulagssértækum yfirlýsingum þínum.

Úthlutaðu skipulaginu á sína einstöku skrá ef það er mögulegt. Ef ekki, að minnsta kosti getur það verið gagnlegt að gefa henni sinn eigin kafla.

Að lokum, staðsetningin og fljóta – sem eru núverandi aðferðir sem nota CSS – var ekki ætlað að þjóna sem skipulagstæki.

Sumir ganga eins langt og segja að þetta sé í raun svipað og skipulagshakkar. Það er ekki raunhæfur valkostur á þessum tíma og vonin er sú að þegar samið hefur verið um um skipulag staðla þá byrja þeir að fá stuðning frá vöfrum.

Þegar þessi stuðningur gerist ætti það ekki að vera mjög erfitt að skipta út eiginleikum kassalíkansins sem eru tölvusnápur fyrir þá sem ætlaðir eru til skipulagningar.

Núna, besti kosturinn er að meðhöndla skipulag þitt með réttum eiginleikum. Þetta mun venjulega þétta síðuþyngd á áhrifaríkari hátt en að nota takmarkaða safnið af eiginleikum sem nú eru tiltækir til að bæta upp einkennilegar.

6. Hafðu alltaf uppfærð skjöl varðandi vinnu þína

Hvort sem þú ert að vinna á vefsíðu sem teymi eða einn, það er mikilvægt að fylgjast með öllu sem þú hefur gert.

Til dæmis, einn, þú gætir gleymt einhverju sem þú hefur gert. Sem lið getur einhver gert eitthvað og þú gætir ekki verið meðvitaður fyrr en þú gerir breytingar sem geta valdið vandamálum með ýmsa þætti kóðans.

bæta við css athugasemdAfrit af kóða er mikið áhyggjuefni fyrir bæði teymi og einstaka hönnuði, sérstaklega þegar notaðir eru vinsælir byggingaraðilar á vefsíðum. Wix, Squarespace og annar hugbúnaður til að byggja upp vefsíðu er þekktur fyrir að endurtaka kóða eða vanta það alveg í gagnagrunninn.

Að nota stílblaðhandbók og álagningarleiðbeiningar eru raunhæfar val á skjölum. Þú getur líka notað CSS athugasemdir er annar valkostur og þetta getur verið gagnlegt til að skipta um þætti CSS skrár sem eru langir. Að setja þetta í stíl eða álagningarhandbók og kemur í veg fyrir að þeir bæta skráarstærðinni við.

Ein skjótasta leiðin til að uppþemba kóða er með því að vinna sömu vinnu tvisvar. Kóðun er flókin, svo það er brýnt að geyma nákvæm skjöl um allt sem þú hefur gert.

Ef þú ert að vinna einn er kjörið að fara yfir þessi skjöl í hvert skipti sem þú sest niður til að byrja að vinna. Þegar þú vinnur sem hluti af teymi skaltu ganga úr skugga um að allir sem kóða í sama skjali fylgir samfélagsstíl eða álagningarhandbók þannig að auðvelt er að skilja kóðabreytingar af öllum í hópnum.

7. Þjappa skránum þínum (CSS Optimization 101)

css þjöppun og hagræðingargif

Samþjöppun: það er aðeins meira en þetta …

Ein áhrifarík leið til að hámarka CSS er með því að nota þjöppun. Þetta er leið til að tryggja að skrárnar þínar séu vafra vingjarnlegar jafnvel þó þær séu ólesanlegar af mönnum.

Í samanburði við vinnuafritin verða þetta brot af stærðinni. Það eru mismunandi forrit sem þú getur nýtt þér til að auðvelda þjöppunarferlið.

Þetta mun framkvæma verkefni, svo sem að finna og laga alla CSS eiginleika sem eru að skrifa yfir hver annan, þjappa hvítu rými og leita að möguleikum á að nota CSS stuttorð.

Auk þæginda þessara forrita geta þau einnig hjálpað þér að læra meira um verkefnin sem þú getur unnið fyrir hönd ef þú vilt það frekar. Þú getur líka notað ýmsa ritstjóra til að hjálpa til við að forsníða CSS skrárnar þínar.

Þeir geta þjónað zip útgáfum af ýmsum CSS skrám sem þú hefur. Þetta er venjulega gert með því að nota PHP. Ef þú vilt nota hagræðingar- og þjöppunartæki, vertu viss um að skoða marga valkosti áður en þú velur þann rétta fyrir þig.

Nú eru þessi forrit yfirleitt góð til að lágmarka villur, en þau eru ekki fullkomin. Vegna þessa ættir þú alltaf að fara yfir CSS eftir að þú notar forrit til að tryggja nákvæmni. Kóði sem er hámarkaður og hreinn er mikilvægur fyrir skráarstærð en einnig fyrir læsileika og viðhald.

Þú átt að gera

Meginreglurnar sem fjallað er um hér eru traust sjónarmið varðandi CSS, en einnig fyrir JavaScript, HTML og önnur forritunarmál. Í samanburði við birtingu vefsíðunnar þinna eru CSS skrár ekki eins áberandi fyrir endanotandann.

Hins vegar hjálpa meginreglurnar sem fjallað er um hér við bæði þróunarreynslu og notendaupplifun.

Flest góð hýsingarfyrirtæki munu hjálpa þér með CSS hagræðingu. Festa vefsíður gera þig að hamingjusömum viðskiptavini, en minni skrár eru líka minna álag á netþjónum sínum.

Við höfum prófað alla kanadíska vefþjónana og mælum með SiteGround. Þeir hjálpa þér ekki aðeins við að hámarka CSS afhendingu, heldur er tæknilegur stuðningur þeirra óviðjafnanlegur.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map