Sådan optimeres CSS-levering – 7 enkle trin

css optimeringsvektorbilledeBorte er de dage, hvor designeksperter og brancheførende bloggere anbefalede at bygge websider højst 30 kilobyte…


Dengang forventedes denne “cap” at håndtere HTML, JavaScript, billeder, CSS og Flash. Lad os være ærlige, det kræver ikke meget at overstige 30 kb.

Da JavaScript og CSS vandt popularitet, blev det almindeligt for CSS alene at overskride 30 kB loftet. Dette gælder især for større websteder.

Du skal dog ikke være for fokuseret på dit “kilobyttælling”, når du bygger og designer sider til dit websted. Det er vigtigt at beholde dine sider optimeret og stram, når du skriver din CSS.

Optimering handler ikke kun om at minimere størrelserne på dine filer. Det handler om at holde dine sider fri for rod og oppustethed og gøre dem så organiserede og effektive som muligt. Når du lærer mere om bedste praksis for CSS-optimering, vil du opdage, at du automatisk opretter mindre filstørrelser.

Her er 5 enkle ting, du kan gøre for at optimere din CSS lige nu.

Sådan optimeres CSS-levering fuldt ud

1. Brug Shorthand

Skrivning i korthed er blevet en meget almindelig praksis. Dette er langt den enkleste måde at reducere din kode på, og hvor lang tid det tager dig at kode. Hvis du ikke gør dette endnu, er der ingen tid som nutiden.

css font egenskab

Der er et væld af elementer, som du kan bruge korthed til, men de mest almindelige inkluderer:

  • Margin
  • polstring
  • Skrifttype
  • Omrids
  • Grænse
  • Baggrund
  • Liste-stil

kortfattede konfigurationsværdierDu kan også kombinere værdier ved hjælp af kortvarig. Ved at specificere forskellige værdier bruger browseren i det væsentlige en specificeret måde til at fortolke reglerne.

Brug af enhver korthåret testamente gøre din samlede kode langt mere kortfattet. Du gemmer både tegn og linjer.

Hvis du bruger korthand i alle mulige områder, kan dette dramatisk reducere den samlede filstørrelse.

2. Slip af hacks

dvs. css-regelFor at tjene IE-specifikke CSS-regler giver brug af betingede CSS-hacks fordelen ved at servere en mindre og renere standard CSS-fil.

Det hjælper med browsere, der er mere standard-kompatible. Den ekstra sidevægt downloades dog kun af de browsere, der kræver det.

Hvis du skal bruge et hack, er det bydende nødvendigt, at den kode, du bruger, er specifik for den version af Internet Explorer, du er fokuseret på.

Der er adskillige forskrevne koder, der fungerer som hacks, hvis du ikke ønsker at skrive dine egne. Bare tag dig tid til virkelig at se på den forbeskrevne kode og sikre dig, at den er nøjagtig Ellers kan dette resultere i endnu flere problemer.

Hvis du nu kan bruge CSS til at få de resultater, du ønsker, skal du gøre dette uden hacks. Naturligvis er dette afhængigt af, at alle andre ting er ens. Din overordnede kode vil være langt lettere og enklere, når du bruger færre hacks på dit websted.

3. Vær smart ved brug af Whitespace

Til din CSS-kode, whitespace er bydende nødvendigt for læsbarhed.

Hvidafstand indeholder elementer, såsom faner, mellemrum og ekstra linjeskift. Hver bit hvidafstand, som du er i stand til at fjerne, ligner eliminering af en karakter.

fjerne tomme linjerDet anbefales dog ofte ikke at skimpte på mellemrummet af hensyn til en mindre fil. Du skal stadig bevare optimal læsbarhed på dine websider.

Hvidafstand er vigtig for formatering, så du vil finde en balance. Hvis du skriver i store blokke til tekst for at eliminere noget hvidrum, det korte opmærksomhedsspænd for læsere på internettet får dem til at klikke væk.

En måde at give både en mindre filstørrelse og læsbarhed er at grøfte faner og kun placere en enkelt linje mellem afsnit. Dette giver tilstrækkeligt hvidrum fra et læsbarhedsmæssigt synspunkt, men det eliminerer også noget af det hvidrum, der ikke er nødvendigt.

Nu, til din CSS-fils produktionsversion, kan du fjerne hvidområdet. Det vil stadig være til stede i din arbejdsfil.

Dette er en anden måde at gå på kompromis med, så du har både mindre filer og læsbar formatering.

4. Beskær nulstilling og rammer

Når du bruger en CSS-ramme, er det bydende nødvendigt, at du gennemgår dokumentationen.

Det er lige så vigtigt at se på hver enkelt linje, der findes i din CSS-fil. Der er tidspunkter, hvor du vil opdage, at der er nogle regler inden for de rammer, som du ikke ønsker for dit aktuelle projekt. Disse kan fjernes.

fjernede ubrugte css-regler

Du kan opleve, at du kan opnå præsentationsdetaljer på en mere kortfattet og elegant måde …

Dette er måske ikke det, du typisk bruger, men hvis det fungerer, kan dette give mulighed for renere rammer. Når du kender til dem, hjælper dette dig også med at undgå utilsigtet duplikering af regelsæt.

Den samme information gælder også for nulstilling. Når du bruger nulstillinger, hjælper de med at neutralisere standardformatet for en browser. Hvis du nu er bekendt med det websted, du opretter, er det ikke ualmindeligt at finde visse erklæringer, som du ved, at du ikke har brug for.

For eksempel på en generel blog vil du sandsynligvis ikke bruge dem. Slip bare af med hvad du ikke har brug for til det specifikke websted, du bygger. Du kan sikre bedre optimeret arbejde, når du bruger et sæt regler vedrørende en nulstilling eller ramme.

I deres standardtilstand bør de dog ikke accepteres. For at holde dine CSS-filer læsbare og magre, skal du se på hver erklæring individuelt og skære ned på dem, der er unødvendige.

5. Fremtidsbeskyttet din CSS

Css syntaks

En anden nyttig CSS-optimeringsmulighed: adskill størstedelen af ​​dine regler fra dine layout-specifikke erklæringer.

Tildel layoutet til sin egen individuelle fil, hvis dette er muligt. Hvis ikke, kan det i det mindste være en fordel at give det sit eget afsnit.

I sidste ende er positioneringen og flyderne – som er de nuværende metoder ved hjælp af CSS – var ikke beregnet til at fungere som layoutværktøjer.

Nogle går så langt som at sige, at disse faktisk ligner layout hacks. Der er ikke et bæredygtigt alternativ på dette tidspunkt, og håbet er, at når de først er aftalt layoutstandarder, begynder de at få support fra browsere.

Når denne support sker, skal det ikke være meget vanskeligt at bytte ud boksemodelleegenskaber, der er hacket til dem, der er beregnet til layout.

Lige nu, det bedste valg er at håndtere dit layout ved hjælp af de rigtige egenskaber. Dette vil normalt kondensere sidevægt mere effektivt end at bruge det begrænsede sæt egenskaber, der i øjeblikket er til rådighed for at kompensere for quirks.

6. Hold altid opdateret dokumentation om dit arbejde

Uanset om du arbejder på et websted som et team eller alene, er det bydende nødvendigt at holde styr på alt hvad du har gjort.

For eksempel kan du alene glemme noget, du har gjort. Som et team kan nogen muligvis gøre noget, og du er måske ikke opmærksom på det, før du foretager ændringer, der kan forårsage problemer med forskellige elementer i koden.

tilføjer css kommentarKodeduplikationer er et enormt område, der er bekymret for både teams og individuelle designere, især når man bruger populære webstedsbyggere. Wix, Squarespace og anden webside-bygningssoftware er kendt for at duplikere kode eller mangler den helt fra deres database.

Brug af stilarkguider og markeringsguider er anvendelige dokumentationsvalg. Du kan også bruge CSS-kommentarer er en anden mulighed, og dette kan være fordelagtigt for at opdele elementerne i CSS-filer, der er lange. Når du sætter disse i stil- eller markeringsguiden, forhindres dem i at tilføje filstørrelsen.

En af de hurtigste måder at oppuste kode er ved at udføre det samme arbejde to gange. Kodning er kompleks, så det er bydende nødvendigt at opbevare nøjagtig dokumentation af alt hvad du har gjort.

Hvis du arbejder alene, er det ideelt at gennemgå denne dokumentation, hver gang du sætter dig ned for at begynde at arbejde. Når du arbejder som en del af et team, skal du sørge for, at alle, der koder i det samme dokument overholder en community-stil eller markeringsguide så kodningsændringer let forstås af alle i gruppen.

7. Komprimere dine filer (CSS Optimization 101)

css komprimering og optimering gif

Komprimering: der er lidt mere ved det end dette …

En effektiv måde at optimere CSS er ved at bruge komprimering. Dette er en måde at sikre, at dine filer er browservenlige, selvom de ikke kan læses af mennesker.

Sammenlignet med arbejdskopierne vil disse være en brøkdel af størrelsen. Der er forskellige applikationer, som du kan drage fordel af for at gøre komprimeringsprocessen lettere.

Disse udfører opgaver, såsom at finde og rette eventuelle CSS-egenskaber, der overskriver hinanden, komprimere hvidt rum og se efter muligheder for at bruge CSS-korthånd.

Ud over bekvemmeligheden ved disse applikationer kan de også hjælpe dig med at lære mere om de opgaver, du kan udføre i hånden, hvis du foretrækker det. Du kan også bruge forskellige teksteditorer til at hjælpe med at formatere dine CSS-filer.

De kan servere zip-versioner af de forskellige CSS-filer, du har. Dette gøres typisk ved hjælp af PHP. Hvis du vil bruge optimerings- og komprimeringsværktøjer, skal du sørge for at gennemgå flere indstillinger, før du vælger den rigtige til dig.

Nu er disse applikationer generelt gode til at minimere fejl, men de er ikke perfekte. På grund af dette skal du altid gennemgå din CSS, når du har brugt en applikation for at sikre nøjagtighed. Kode, der er optimeret og ren, er kritisk for filstørrelse, men også for læsbarhed og vedligeholdelse.

Din tur

De principper, der diskuteres her, er solide overvejelser for CSS, men også for JavaScript, HTML og andre programmeringssprog. Sammenlignet med gengivelsen af ​​dit websted er CSS-filer ikke så fremtrædende for slutbrugeren.

De principper, der diskuteres her, hjælper dog med både udviklingsoplevelsen og brugeroplevelsen.

De fleste gode webhostingfirmaer hjælper dig med CSS-optimering. Hurtigere websteder gør dig til en lykkelig kunde, men mindre filer er også mindre belastende på deres servere.

Vi har testet hver eneste af de canadiske webhosts og anbefaler SiteGround. Ikke kun hjælper de dig med at optimere CSS-levering, men deres teknologiske support er uden sidestykke.

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

About the author

Adblock
detector