Slå ihop och förminska CSS-filer

En av de saker som kan förbättra prestandan mest är att ladda ner färre filer. Men det blir ohållbart att jobba om all css ska ligga i en enda fil. Så hur kan du både ha en vettig arbetsmiljö och ändå minska antalet filer att ladda ned?

Lösningen är att ha ett verktyg som hjälper dig att slå ihop flera filer till en enda. Det finns flera sätt att lösa detta på. Som nybörjare är det enklast förmodligen att använda ett fristående program som gör det åt dig.

För mer avancerade användare är Grunt och Gulp fantastiskt smidigt att jobba med, men det kan kännas krångligt att få på plats innan man är van.

Är man duktig på php eller .net kan man också låta servern göra jobbet, vilket har fördelen att en ny utvecklare inte är beroende av att ha exakt rätt verktyg på sin dator för att kunna jobba med webbplatsen.

I den här artikeln visas det första sättet – att använda ett fristående program. Det finns många program som fungerar på ungefär samma sätt. Till OSX är CodeKit ett av de mest populära, det kostar dock pengar. En liknande variant som finns till både OSX och Windows heter Prepros och är gratis om man kan stå ut med en popup som uppmanar dig att betala för appen.

One File To Rule Them All

När du installerat Prepros behöver du importera ditt projekt. Längst ned till vänster finns en knapp för ”+ Add Project”. Välj den mapp där ditt webbprojekt ligger.

Om du nu tryck på Preview-knappen kan Prepros starta en egen webbserver och öppna din sajt i webbläsaren. När du ändrar i filer kommer Prepros märka det också automatiskt ladda om sajten åt dig. Prepros kan också hjälpa dig att testa på flera enheter samtidigt, vilket kan vara användbart om du bygger för både dator och mobil.

Nästa steg är att skapa en fil som importerar övriga css-filer. För att lösa detta behöver vi använda en .less-fil. Less är en variant av CSS, men där man byggt ut det för att det ska vara enklare att jobba med. Just nu är det dock bara en enda sak du behöver lära dig om less-filer och det är hur man kan importera css-filer.

Skapa en mapp i ditt webbprojekt som heter ”less”. I den mappen skapar du en fil som heter main.less.

Lägg till följande innehåll i main.less:

@import (inline) "../css/fil-1.css";
@import (inline) "../css/fil-2.css";

Namnen fil-1.css och fil-2.css byter du till namnen på dina egna filer. Du kan lägga till hur många rader du vill. Spara filen och växla tillbaka till Prepros.

prepro-css

Markera main.less. I högerspalten visas ett antal val för filen. Markera alla fyra rutorna och tryck sedan på knappen Process File.

I din css-mapp har nu filen main.css skapats och i din finns innehållet från alla filer du valda att importera.

Växla tillbaka till din kod-editor och öppna den html-fil som ska använda css-filen, t ex index.html. Istället för att ha ett <link>-element för varje css-fil, kan du nu byta ut alla dom och istället inkludera main.css.

Före:

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/normalize.css">

Efter:

<link rel="stylesheet" href="css/main.css">