Att lära sig att skriva ren, optimerad CSS kräver en hel del övning och en ostoppbar tvångslöshet för nyhet. Att hålla din CSS trim och städa handlar inte bara om att mata ditt galna psykologiska behov av renlighet, men för särskilt stora webbplatser är utbetalningen snabbare att ladda sidor. Snabbare lastningstider motsvarar ökad användbarhet och högre användartillfredsställelse.
Det här inlägget kommer att undersöka flera tekniker som du kan använda för att optimera din CSS samt flera onlineverktyg som automatiskt kan komprimera din kod.
Att komprimera eller inte komprimera
Innan vi kommer in på hur du komprimerar din CSS bör det noteras att det ofta finns en kompromiss mellan komprimerad och lättläst kod. Många kodare är stolta över organisationen uppenbar i sin CSS och skulle inte drömma om att sätta den genom kompressorer som slänger bort kommentarer och raster. Som webbdesigner bör du analysera dina mål för koden som du skriver. Om du skapar en liten webbplats som bara kräver några rader av CSS, behöver det inte behövas extra komprimering. Även om du skriver kod som du måste dela med ett team av programmerare, lägger du till extra kommentarer och radbrytningar kan spara dina kollegor mycket tid och få en viss allvarlig tacksamhet. Men om du utformar en stor webbplats som kräver massor av CSS, vill du definitivt hålla koll på din filstorlek och göra vad du kan för att hålla ner det.
Det kan ta ett tag att hitta den perfekta blandningen mellan komprimering och läsbarhet, men båda är värda att driva och att uppnå detta balans kan göra ditt jobb mycket enklare. Dessutom är det definitivt inte fallet att komprimering alltid resulterar i en minskning av läsbarheten. Många tekniker du kan använda för att komprimera din kod kommer att resultera i bättre, mer organiserad kod.
Med det i åtanke, låt oss hoppa in i några tekniker för att hålla din CSS-filstorlek till ett minimum.
Tomma stilblock
Låt oss börja med det uppenbara. Om du har ett stilblock med ingenting i det, släng det. Gnugga inte om hur du kan använda dem senare heller, de är bara röriga och du vet det. Lägg inte till det om du inte har anledning att.
Stenografi
CSS Shorthand är en metod för att kombinera flera rader av CSS till ett enda kommando. Att göra en vana med att använda alla de korta tricksna du är medveten om kan drastiskt minska de kodkod du skriver i det långa loppet. Här är ett exempel:
Lång version:
Shorthand version:
För mer CSS shorthand tricks, besök artikeln nedan.
CSS Sprites
Den grundläggande idén bakom CSS sprites minskar antalet HTTP-förfrågningar för att öka sidbelastningstiden. Hur sprites åstadkomma denna prestation är att kombinera flera bilder till en enda bild, vanligtvis i ett nätformat. Varje enskild bild visas genom att ändra bakgrundsställningen för den större bilden. För en mer detaljerad titt på CSS Sprites, kolla in Chris Coyiers handledning på CSS-Tricks:
Kommentar Reduktion
Jag älskar att fylla i min kod med kommentarer. Ju mer kommentarer jag lägger på det, desto snabbare kan jag visuellt sortera igenom de olika sektionerna av kod. Men om du går för mycket optimerad CSS med ett litet fotavtryck, kan alltför stora kommentarer äta upp värdefulla KB. Försök att eliminera onödiga kommentarer och omformulera dem som du absolut måste behålla så få tecken som möjligt.
Rimliga typsnitt-familjer
När filstorlek är en stor fråga, packa inte dina font-famlies till max med alternativ. Klipp ut allt onödigt fett och trimma dina extra alternativ till en eller två.
Innan:
Efter:
Använd hexfärger
För att skära ner på tecken, konvertera eventuella RGB-värden till deras hexadecimala ekvivalenter. Det kan tyckas trivialt, men varje karaktär räknas!
Innan:
Efter:
Eliminera radbrytningar
Gå igenom varje stilblock och ta bort onödig hård avkastning. Du kan också dike den sista semikolon
Innan:
Efter:
10 CSS-kompressorer online
CSS-kompressorer automatiserar mycket av arbetet med att städa upp din kod. Många av dem ger dig den procentandel som din filstorlek har reducerats så var noga med att prova några för att se vilken som är bäst.
CSS-enhet
Alternativ:
- Komprimeringsläge: Lätt, Normal eller Super Compact
- Kommentar Stripping: None, all eller those longer than a specified length
CSS kompressor
Alternativ (Välj Ja eller Nej för varje):
- Sortera egenskaper
- Komprimera färger
- Komprimera teckensnitt
- Små bokstäver
- Ta bort onödiga bakslag
- Ta bort onödiga halvkolonor
Arantius
Alternativ (Välj Ja eller Nej för varje):
CSS Optimizer
Alternativ:
- Ta inte bort raster (Ja eller Nej)
- Få CSS från URL, File eller Pasted Text
Lotteri Post
Alternativ: Ingen
Rengör CSS
Alternativ (Välj Ja eller Nej för varje):
- Sortera Selectors
- Sortera egenskaper
- Optimera selektorer och deras egenskaper (0, 1 eller 2)
- Merge Shorthand Properties
- Endast säkra optimeringar
- Komprimera färger
- Komprimera teckensnitt
- Små bokstäver
- Fall för egenskaper (små bokstäver i UpperCase)
- Ta bort onödiga backslashes
- Konvertera! Viktigt hacka
- Ta bort sist;
- Spara kommentarer
- Kassera ogiltiga egenskaper (CSS2.1, CSS2.0 eller CSS1.0)
- Utgång som fil
Pingates
Alternativ (Välj Ja eller Nej för varje):
- Konvertera långa färger till hex
- Konvertera långa hex-koder till korta hex-koder
- Konvertera lång hex till färgnamn
- Konvertera RGB till hex
- Ta bort nollmätningar
- Kombinera samma regler
- Kombinera identiska selektorer
- Kombinera egenskaper
- Ta bort överskrivna egenskaper
- Ta bort värdelösa värden från marginaler och vadderingar
- Visa statistik
- Utgång i färg
- Utgång med minsta storlek
PHP Insider
Alternativ: Ingen
SevenForty
Alternativ:
- Avbrytningsalternativ: 500, 1000, 1500 eller 2000
Sidkolumn
Alternativ: Ingen
GZIP
Trots den hemskt fula webbplatsen är GZIP ett otroligt användbart verktyg för komprimering av många typer av kod. Det är inte den enklaste komprimeringsmetoden att räkna ut men kan vara förvirrande för nybörjare. Kolla in denna handledning för mer information om GZIPPING din CSS.
Slutsats
Som jag sa tidigare kan många av dessa metoder verka överdrivna och inane. Tricket är att titta på den stora bilden. Även om någon av dessa tips kan ha en nästan obetydlig effekt kan kombinering av flera eller alla dessa tekniker resultera i stor inverkan på filstorleken på din CSS. Använd kommentarerna nedan för att meddela vilka komprimerings- / optimeringsmetoder du använder och varför.