4 Værktøjer til revision og optimering af CSS
Når din hjemmeside begynder at vokse, så vil din kode. Som din kode udvides, kan CSS pludselig blive svært at vedligeholde, og du kan ende med at overskrive en CSS-regel med en anden. Dette komplicerer ting, og du vil nok ende med masser af fejl.
Hvis dette sker med dig, er det tid for dig at Kontroller dit websites CSS. Revision af din CSS vil give dig mulighed for at identificere dele af dit CSS, der ikke er optimeret. Du kan også reducere stilarkets filstørrelse ved at fjerne kodeord, der sænker dit websteds ydeevne.
Her er 5 gode værktøjer til at hjælpe dig med at revidere og optimere CSS.
Type-o-matic
Type-o-matic er en Firebug plugin til at analysere skrifttyper, der bruges på en hjemmeside. Dette plugin giver en visuel rapport i en tabel, der bærer skrifttypeegenskaber som skrifttypefamilien, størrelsen, vægten, farven og også antallet af gange, skrifttypen bruges på websiden. Gennem rapporttabellen kan du nemt optimere fontbrugen, fjerne hvad der er unødvendigt eller kombinere stilarter, der er alt for ens.
CSS Lint
CSS Lint er en linting værktøj, der analyserer CSS-syntaksen baseret på specifikke parametre, der adresserer for ydeevne, tilgængelighed og kompatibilitet af din CSS. Du ville være overrasket over resultaterne, forventer mange advarsler i dit CSS. Disse fejl vil dog i sidste ende hjælpe dig med at rette CSS-syntaksen og gøre den mere effektiv. Derudover vil du også være en bedre CSS-skribent.
CSS ColorGuard
CSS ColorGuard er et relativt nyt værktøj. Det er bygget som et Node-modul, og det kører på tværs af alle platforme: Windows, OS X og Linux. CSS ColorGuard er et kommandolinjeværktøj, der giver dig besked, hvis du bruger lignende farver i dit stylesheet; f.eks. # f3f3f3 er temmelig tæt på # f4f4f4, så du vil måske overveje at slå sammen de to. CSS ColorGuard kan konfigureres, du kan indstille lighedstærsklen og indstille de farver, du vil have værktøjet til at ignorere.
CSS Dig
CSS Dig er et Python-script og virker lokalt på din computer. CSS Dig vil køre en grundig undersøgelse i dit CSS. Det vil læse og kombinere egenskaber, f.eks. Alle baggrundsfarverklæringer vil gå under baggrundsafsnittet. På den måde kan du nemt træffe beslutninger baseret på rapporten, når du forsøger at standardisere din CSS-syntaks, f.eks. Du kan finde farve på tværs af stilarter med følgende farveangivelse.
farve: #ccc; farve: #cccccc; farve: #CCC; farve: #CCCCCC;
Disse farvedeklarationer gør det samme. Du kan lige så godt gå med #ccc eller med hovedstaden #CCC som standard. CSS Dig kan udsætte denne redundans for andre CSS egenskaber også, og du vil være i stand til at gøre din kode mere konsistent.
