Si të zgjedhim shpërndarjen CSS – 7 hapa të thjeshtë

imazhi i vektorit css për optimizimKanë kaluar ditët kur ekspertët e dizajnit dhe blogerët kryesorë të industrisë rekomanduan ndërtimin e faqeve në internet jo më shumë se 30 kilobajt …


Në atë kohë, kjo “kapak” pritej të merrej me HTML, JavaScript, imazhe, CSS dhe Flash. Le të jemi të sinqertë, nuk duhet shumë për të tejkaluar plotësisht 30 kb.

Ndërsa JavaScript dhe CSS fituan popullaritet, u bë e zakonshme që vetëm CSS të tejkalojë tavanin 30KB. Kjo është veçanërisht e vërtetë për faqet e internetit më të mëdha.

Sidoqoftë, nuk duhet të përqendroheni shumë në “numrin tuaj të kilobyteve” kur ndërtoni dhe dizajnoni faqe për faqen tuaj të internetit. Shtë e rëndësishme të mbani faqet tuaja optimizuar dhe shtrënguar kur shkruani CSS tuaj.

Optimizimi nuk ka të bëjë vetëm me minimizimin e madhësive të skedarëve tuaj. Ka të bëjë me mbajtjen e faqeve tuaja pa rrëmujë dhe fryrje, duke i bërë ato sa më të organizuara dhe efikase. Ndërsa mësoni më shumë rreth praktikave më të mira të optimizimit të CSS, do të zbuloni se krijoni automatikisht madhësi më të vogla të skedarëve.

Këtu janë 5 gjëra të thjeshta që mund të bëni për të optimizuar CSS tuaj tani.

Si të optimizoni plotësisht dorëzimin CSS

1. Përdorni Shorthand

Të shkruarit në shkallë të shpejtë është bërë një praktikë shumë e zakonshme. Kjo është deri tani mënyra më e thjeshtë për të zvogëluar kodin tuaj dhe sa kohë ju merr për të koduar. Nëse nuk jeni duke e bërë këtë ende, nuk ka kohë si e tanishmja.

pronë e fontit css

Ekzistojnë një mori elementësh që mund të përdorni për të, por më të zakonshmet përfshijnë:

  • diferencë
  • mbushje
  • burim
  • skicë
  • kufi
  • sfond
  • List-style

vlerat e konfigurimit shorthandJu gjithashtu mund të kombinoni vlerat duke përdorur shorthand. Duke specifikuar vlera të ndryshme, shfletuesi në thelb do të përdorë një mënyrë të specifikuar për të interpretuar rregullat.

Përdorimi i çdo vullneti shorthand e bëni kodin tuaj të përgjithshëm shumë më të përmbledhur. Po kurseni të dy karakteret dhe linjat.

Nëse përdorni shorthand në çdo fushë të mundshme, kjo mund të zvogëlojë në mënyrë dramatike madhësinë e përgjithshme të skedarit.

2. Heqni Hacks

pra rregulli cssPër të shërbyer rregullat CSS specifike për IE, përdorimi i kushtëzimeve të kushtëzuara CSS ju jep përfitimin e shërbimit të një skedari CSS më të vogël dhe më të pastër të paracaktuar..

Ndihmon me shfletuesit që janë më standarde në përputhje. Sidoqoftë, pesha shtesë e faqes do të shkarkohet vetëm nga shfletuesit që e kërkojnë atë.

Nëse duhet të përdorni një hack, është e domosdoshme që kodi që përdorni të jetë specifik për versionin e Internet Explorer në të cilin jeni përqendruar.

Ekzistojnë kode të shumta të paracaktuara që shërbejnë si hacks nëse nuk doni të shkruani vetë. Mjafton të marrësh kohën të shikosh me të vërtetë kodin e paracaktuar dhe të sigurohesh që ai të jetë i saktë ose përndryshe kjo mund të rezultojë në akoma më shumë probleme.

Tani, nëse mund të përdorni CSS për të marrë rezultatet që dëshironi, bëjeni këtë pa asnjë pengesë. Sigurisht, kjo varet nga të gjitha gjërat e tjera të jenë të barabarta. Kodi juaj i përgjithshëm do të jetë shumë më i lehtë dhe më i thjeshtë kur përdorni më pak hacks në faqen tuaj.

3. Jini të zgjuar në lidhje me përdorimin e hapësirës së bardhë

Për kodin tuaj CSS, hapësira e bardhë është e domosdoshme për lexueshmërinë.

Hapësira e bardhë përfshin elemente, siç janë skedat, hapësirat dhe ndërprerjet shtesë të linjave. Bitdo copë hapësirë ​​e bardhë që ju jeni në gjendje të eliminoni është e ngjashme me eliminimin e një karakteri.

hiqni linjat bosheSidoqoftë, shpesh nuk rekomandohet të bësh skemë në hapësirën e bardhë për hir të një skedari më të vogël. Ju ende duhet të ruani lexueshmërinë optimale në faqet e faqeve tuaja.

Hapësira e bardhë është e rëndësishme për formatimin, kështu që ju dëshironi të gjeni një ekuilibër. Nëse shkruani në blloqe të mëdha tek teksti për të eleminuar disa hapësirë ​​të bardha, hapësira e shkurtër e vëmendjes së lexuesve në internet do t’i bëjë ata të klikojnë larg.

Një mënyrë për të siguruar një madhësi më të vogël të skedarit dhe lexueshmëri është të vendosni skedat dhe të vendosni vetëm një vijë të vetme midis paragrafëve. Kjo siguron hapësirë ​​të mjaftueshme të hapësirës së bardhë nga këndvështrimi i lexueshmërisë, por gjithashtu eliminon edhe një pjesë të hapësirës së bardhë që nuk është e nevojshme.

Tani, për versionin e prodhimit të skedarit tuaj CSS, mund të hiqni hapësirën e bardhë. Ajo do të jetë ende e pranishme në dosjen tuaj të punës.

Kjo është një mënyrë tjetër për të bërë kompromis në mënyrë që të keni të dyja skedarë më të vegjël dhe format të lexueshëm.

4. Rivendosjet e krasitjes dhe kornizat

Kur përdorni një kornizë CSS, është e domosdoshme që të rishikoni dokumentacionin.

Equallyshtë po aq e rëndësishme të shikoni çdo rresht të vetëm që është brenda skedarit tuaj CSS. Ka raste kur do të zbuloni se ekzistojnë disa rregulla në kuadrin që nuk dëshironi për projektin tuaj aktual. Këto mund të hiqen.

hiqen rregullat e pashfrytëzuara css

Ju mund të zbuloni se mund të arrini detaje prezantuese në një mënyrë më koncize dhe elegante…

Kjo mund të mos jetë ajo që përdorni zakonisht, por nëse funksionon, kjo mund të lejojë një kornizë më të pastër. Kur dini për ta, kjo gjithashtu ju ndihmon të shmangni kopjimin e paqëllimshëm të grupeve të rregullave.

I njëjti informacion vlen edhe për rivendosjet. Kur përdorni rivendosjen, ato ndihmojnë në neutralizimin e stilit të parazgjedhur të një shfletuesi. Tani, nëse jeni njohur me uebfaqen që po krijoni, nuk është e pazakontë të gjeni deklarata të caktuara për të cilat dini se nuk do t’ju duhet..

Për shembull, në një blog të përgjithshëm, me siguri nuk do t’i përdorni. Thjesht hiqni qafe çdo gjë që nuk ju nevojitet për sitin specifik që po ndërtoni. Ti mundesh siguroni punë më të mirë të optimizuar kur përdorni një sërë rregullash në lidhje me një rivendosje ose kornizë.

Sidoqoftë, në gjendjen e tyre të paracaktuar, ato nuk duhet të pranohen. Për t’i mbajtur skedarët tuaj CSS të lexueshëm dhe të ligët, shikoni çdo deklaratë individualisht dhe shkurtoni ato që janë të panevojshme.

5. Vërtetimi i së ardhmes për CSS-në tuaj

Sintaksë Css

Një tjetër mundësi e dobishme për optimizimin e CSS: ndani pjesën më të madhe të rregullave tuaja nga deklaratat tuaja specifike për paraqitjen.

Caktoni paraqitjen në dosjen e tij individuale nëse kjo është e mundur. Nëse jo, të paktën duke i dhënë asaj pjesën e vet mund të jetë e dobishme.

Në fund të fundit, pozicionimi dhe noton – të cilat janë metodat aktuale duke përdorur CSS – nuk ishin për qëllim të shërbenin si mjete të faqosjes.

Disa shkojnë aq larg sa të thonë se këto janë në të vërtetë të ngjashme me hacks e faqosjes. Nuk ka një alternativë të vlefshme në këtë kohë dhe shpresa është që pasi të bien dakord për standardet e paraqitjes, ata fillojnë të marrin mbështetje nga shfletuesit..

Sapo të ndodhë kjo mbështetje, nuk duhet të jetë shumë e vështirë të ndërroni vetitë e modelit të kutisë që janë hakuar për ato të destinuara për paraqitjet.

Tani për tani, zgjidhja më e mirë është të trajtoni paraqitjen tuaj duke përdorur pronat e duhura. Kjo zakonisht do të kondensojë peshën e faqes në mënyrë më të efektshme sesa përdorimi i grupit të kufizuar të pronave të disponueshme aktualisht për të kompensuar quirks.

6. Gjithmonë Vazhdoni Dokumentacionin e Azhurnuar në lidhje me punën tuaj

Pavarësisht nëse jeni duke punuar në një faqe në internet si ekip apo vetëm, është e domosdoshme të mbani shënime gjithçka që keni bërë.

Për shembull, vetëm, mund të harroni diçka që keni bërë. Si ekip, dikush mund të bëjë diçka, dhe ju mund të mos jeni të vetëdijshëm derisa të bëni ndryshime që mund të shkaktojnë çështje me elementë të ndryshëm të kodit.

duke shtuar komentin cssDublikimet e kodit janë një zonë e madhe shqetësuese për ekipet dhe projektuesit individual, veçanërisht kur përdorni ndërtuesit e faqeve të njohura të internetit. Wix, Squarespace dhe programe të tjera të ndërtimit të faqes në internet janë të njohur për kopjimin e kodit, ose mungojnë atë plotësisht nga baza e të dhënave të tyre.

Përdorimi i udhëzuesve të fletëve të stilit dhe udhëzuesve të shënjimit janë zgjedhje e vlefshme e dokumentacionit. Ju gjithashtu mund të përdorni komentet CSS është një mundësi tjetër dhe kjo mund të jetë e dobishme për ndarjen e elementeve të skedarëve CSS që janë të gjata. Vendosja e këtyre në stilin ose udhëzuesin e shënjimit, i parandalon ata të shtojnë madhësinë e skedarit.

Një nga mënyrat më të shpejta për të mbushur kodin është duke bërë të njëjtën punë dy herë. Kodimi është kompleks, kështu që është e domosdoshme të ruani dokumentacionin e saktë për gjithçka që keni bërë.

Nëse jeni duke punuar vetëm, është ideale që të rishikoni këtë dokumentacion çdo herë që të uleni për të filluar punën. Kur punoni si pjesë e një ekipi, sigurohuni që të gjithë të kodojnë në të njëjtin dokument aderon në një stil të komunitetit ose udhëzues të shënjimit në mënyrë që ndryshimet e kodifikimit të kuptohen lehtësisht nga të gjithë në grup.

7. Kompresoni skedarët tuaj (Optimizimi CSS 101)

compression css dhe gif optimizim

Kompresim: ka pak më shumë se kjo…

Një mënyrë efektive për të optimizuar CSS është duke përdorur kompresim. Kjo është një mënyrë për të siguruar që skedarët tuaj të jenë miqësore me shfletuesin edhe pse janë të palexueshme nga njerëzit.

Në krahasim me kopjet e punës, këto do të jenë një pjesë e madhësisë. Ka aplikacione të ndryshme nga të cilat mund të përfitoni për të bërë më të lehtë procesin e kompresimit.

Këto do të kryejnë detyra, të tilla si gjetja dhe rregullimi i cilësive të CSS që janë duke shtypur njëri-tjetrin, duke kompresuar hapësirën e bardhë dhe do të kërkojnë shanse për të përdorur tavolinën CSS..

Përveç lehtësisë së këtyre aplikacioneve, ato gjithashtu mund t’ju ndihmojnë të mësoni më shumë rreth detyrave që mund të bëni me dorë nëse preferoni. Ju gjithashtu mund të përdorni redaktorë të ndryshëm të tekstit për të ndihmuar në formatimin e skedarëve tuaj CSS.

Ato mund të shërbejnë versione zip të skedarëve të ndryshëm CSS që keni. Kjo bëhet zakonisht duke përdorur PHP. Nëse dëshironi të përdorni mjete optimizuese dhe kompresuese, sigurohuni që të rishikoni opsione të shumta përpara se të zgjidhni atë të duhurin për ju.

Tani, këto aplikacione janë përgjithësisht të mirë në minimizimin e gabimeve, por ato nuk janë perfekte. Për shkak të kësaj, gjithmonë duhet të rishikoni CSS tuaj pasi të keni përdorur një aplikacion për të siguruar saktësinë. Kodi që është i optimizuar dhe i pastër është thelbësor për madhësinë e skedarit, por edhe për lexueshmërinë dhe mirëmbajtjen e tij.

Radha jote

Parimet e diskutuara këtu janë konsiderata të ngurta për CSS, por edhe për JavaScript, HTML dhe gjuhët e tjera të programimit. Në krahasim me renditjen e faqes tuaj, skedarët CSS nuk janë aq të spikatur për përdoruesit e fundit.

Sidoqoftë, parimet e diskutuara këtu ndihmojnë si përvojën e zhvilluar ashtu edhe përvojën e përdoruesit.

Shumica e kompanive të mira të mbajtjes në internet do t’ju ndihmojnë me optimizimin e CSS. Uebfaqet më të shpejta ju bëjnë një klient të lumtur, por skedarët më të vegjël gjithashtu janë më pak të ngarkuar në serverët e tyre.

Ne kemi testuar secilin nga hostet kanadezë në internet, dhe rekomandojmë SiteGround. Jo vetëm që ju ndihmojnë të zgjedhni shpërndarjen CSS, por mbështetja e tyre teknologjike është e pashembullt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector