CSS står för cascading styleheets som är en viktig aspekt av modern webbdesign. Om du är webbdesigner och vet hur man designar WordPress-teman eller bloggarmallar, kan du inte ignorera CSS längre. Men om du har en blogg och vill optimera CSS-filerna för bättre prestanda och snabbare laddning, är här alla verktyg du behöver.

Så här hittar du CSS-filen i din bloggmall

Om din blogg är på WordPress, placeras CSS-filen idealiskt i temanmappen under wp-content / themes / yourtheme . För att veta den exakta platsen, öppna din blogg och kolla sidkällan. Du hittar en länk till CSS av ditt tema som visas nedan

Om din blogg är på Blogger öppnar du Blogger-instrumentpanelen och går till fliken "Layout". Välj "Redigera HTML" och kryssrutan "expand widget templates". Kopiera sedan CSS-koden i en anteckningsblankett definierad strax efter öppningskroppen.

Hämta en kopia av den filen och gör de modifikationer som beskrivs i den här handledningen. Det skulle vara bättre om du tar en säkerhetskopia av stilarket för att om sakerna går fel kan du återställa webbplatsens design genom att använda säkerhetskopian.

Optimera CSS-koden

Formatera din CSS-kod

Det första steget mot optimering av någon CSS-kod är korrekt formatering. Du bör noggrant formatera stilelementen och attributen så att de är lätta att förstå. Dessutom bör koden skrivas så att de inte överlappar varandra med andra klasser eller ID: er. Manuell formatering av koden är ett jobbigt jobb och du kan använda verktyget Format CSS för att komma igång.

Kopiera stilarket som du vill formatera och klistra in i textrutan. Välj sedan de föredragna reglerna för formatering från den högra panelen.

Till exempel: Du kanske vill infoga en ny rad efter CSS-egenskapen för varje div-tagg. Du kan också vilja ta bort alla vita utrymmen som placeras efter en semikolon. Ange alla regler som du vill att programmet ska utföra och tryck sedan på "Format CSS" -knappen. Alla angivna regler skulle tillämpas och koden formateras enligt nedan:

Optimera CSS för att avlägsna uppsägningar

Nu när du har formaterat din kod för läsbarhet är det dags för lite optimering. Gå till Online CSS optimizer och klistra in hela koden i den angivna textrutan. Du kan också ange webbadressen till din CSS-fil, om du vill.

Detta verktyg kan användas för följande ändamål:

  • konvertera alla RGB-färgvärden till hexadecimal, vilket reducerar överhead och ökad effektivitet.
  • ta bort alla kommentarer och vita mellanslag.
  • optimera gränsvärdena till moderna mätvärden. Till exempel: attributgränsen: 2px 5px 2px 5px ändras till gränsen: 2px 5px ;.
  • konvertera absoluta värden till relativa sådana. Till exempel: Skriftstorleken för attributet: 18px; kan ändras till teckenstorlek: 2em;
  • konverterar flera bakgrund, teckensnitt, marginal, vaddering, listattribut till ett enda attribut.

Rengör din CSS-fil och minska storlek

Nu är det dags att rengöra din CSS-kod för fel och minska filstorleken. Att minska storleken på CSS är viktigt eftersom det påverkar belastningstiden på dina bloggs sidor. Gå till Clean CSS och klistra in CSS-koden som du optimerade i det tidigare steget. Välj komprimeringsläge som högst och välj alternativen som visas nedan

Ren CSS är baserad på CSS Tidy och kan användas för att slå samman stenegenskaper, komprimera färger och fontvikter. Ett liknande verktyg för att komprimera CSS-kod för snabbare laddning är CSS Drive.

Några tips

Nedan följer några tips och tricks du bör tänka på medan du skriver CSS-koden för din bloggmall:

1. Använd alltid externa stylesheets istället för att klistra in hela koden före taggen.

2. Använd universella klasser för att undvika repetitioner. Till exempel: Du kan använda en enkel klass div.floatleft {float: left;} för att flyta något element till vänster istället för att använda samma attribut i flera klasser.

3. Använd webbläsarspecifika CSS-filer för att fixa fel. Det betyder att om du upptäcker en bugg som bara uppträder i en viss webbläsare (vanligtvis Internet Explorer 6 eller äldre versioner), använd ett separat stilark för att åtgärda den buggen. Detta håller ditt huvud stilark snyggt och rent.

För WordPress-bloggare : Förutom att optimera CSS-koden måste du kolla hur du kan minska bloggens laddningstid och hur du ska rensa WordPress-databasen.

Har du optimerat CSS i din bloggmall än? Vilka är dina favoritverktyg för att optimera CSS-koden? Dela dina idéer i kommentarfältet.