CSS står for cascading stylesheets som er et viktig aspekt av moderne webdesign. Hvis du er webdesigner og vet hvordan du designer WordPress-temaer eller bloggermaler, kan du ikke ignorere CSS lenger. Men hvis du har en blogg og ønsker å optimalisere CSS-filene for bedre ytelse og raskere lasting, er her alle verktøyene du trenger.

Slik finner du CSS-filen i bloggen din

Hvis bloggen din er på WordPress, er CSS-filen plassert ideelt i tema-mappen under wp-innhold / temaer / dintheme . For å vite det nøyaktige stedet, åpne bloggen din og sjekk sidekilden. Du finner en lenke til CSS av temaet ditt som vist nedenfor

Hvis bloggen din er på Blogger, åpner du Blogger-dashbordet og går til "Layout" -fanen. Velg "Rediger HTML" og avkrysningsboksen "Utvid widget-maler". Deretter kopierer du CSS-koden i en notisblokkfil definert like etter åpningskroppen.

Last ned en kopi av den filen og gjør endringene beskrevet i denne opplæringen. Det ville være bedre hvis du tar en sikkerhetskopi av stilarket for hvis ting går galt, kan du gjenopprette nettstedets design ved å bruke sikkerhetskopien.

Optimaliser CSS-koden

Formater CSS-koden din

Det første skrittet mot optimalisering av en hvilken som helst CSS-kode er riktig formatering. Du bør nøye formatere stilelementene og attributter slik at de er enkle å forstå. Videre skal koden skrives slik at de ikke overlapper med andre klasser eller ID-er. Formatering av koden manuelt er en tøff jobb, og du kan bruke Format CSS-verktøyet for å komme i gang.

Kopier stilarket du vil formatere og lime inn i tekstboksen. Deretter velger du de foretrukne formateringsreglene fra det høyre panelet.

For eksempel: Du vil kanskje sette inn en ny linje etter CSS-egenskapen til hver div-tag. Du vil kanskje også fjerne alle de hvite mellomrom som er plassert etter et semikolon. Sett alle reglene du vil at programmet skal utføre, og trykk deretter på "Format CSS" -knappen. Alle spesifiserte regler vil bli brukt, og koden vil bli formatert som vist nedenfor:

Optimaliser CSS for å fjerne avskedigelser

Nå som du har formatert koden din for lesbarhet, er det på tide for noen optimalisering. Gå til Online CSS optimizer og lim inn hele koden i tekstfeltet som er oppgitt. Du kan også skrive inn nettadressen til CSS-filen, hvis du vil.

Dette verktøyet kan brukes til følgende formål:

  • konvertere alle RGB-fargeværdiene til heksadesimale, og dermed redusere overhead og økende effektivitet.
  • fjern alle kommentarer og hvite mellomrom.
  • optimaliser grensverdiene til moderne beregninger. For eksempel: Attributgrensen: 2px 5px 2px 5px er endret til grensen: 2px 5px ;.
  • konvertere absolutte verdier til relative. For eksempel: Attributt skriftstørrelsen: 18px; kan endres til skriftstørrelse: 2em;
  • konverterer flere bakgrunner, font, margin, polstring, listattributter til et enkelt attributt.

Rengjør CSS-filen og reduser størrelsen

Nå er det på tide å rengjøre CSS-koden for feil og redusere filstørrelsen. Å redusere størrelsen på CSS er viktig da det påvirker belastningstiden på bloggens sider. Gå til Clean CSS og lim inn CSS-koden du optimaliserte i det tidligere trinnet. Velg komprimeringsmodus som høyest og velg alternativene som er vist nedenfor

Clean CSS er basert på CSS Tidy og kan brukes til å fusjonere stenografiegenskaper, komprimere farger og skrifttypevekter. Et lignende verktøy for å komprimere CSS-kode for raskere lasting er CSS Drive.

Noen tips

Følgende er noen tips og triks du bør huske på mens du skriver CSS-koden for bloggens mal:

1. Bruk alltid eksterne stilark i stedet for å lime hele koden før taggen.

2. Bruk universelle klasser for å unngå repetisjoner. For eksempel: Du kan bruke en enkel klasse div.floatleft {float: left;} for å flyte et hvilket som helst element til venstre i stedet for å bruke samme attributt på flere klasser.

3. Bruk nettleser-spesifikke CSS-filer for å fikse feil. Det betyr at hvis du ser en feil som bare forekommer i en bestemt nettleser (vanligvis Internet Explorer 6 eller eldre versjoner), bruk et eget stilark for å fikse den feilen. Dette holder ditt hoved stilark rent og pent.

For WordPress-bloggere : Bortsett fra optimalisering av CSS-koden må du sjekke ut hvordan du kan redusere bloggens lastetid og hvordan du skal rydde opp WordPress-databasen.

Har du optimalisert CSS til bloggsmalen din ennå? Hva er dine favorittverktøy for å optimalisere CSS-koden? Del dine ideer i kommentarfeltet.