CSS-verkorter

Over dit hulpmiddel

Je hebt dus een CSS-bestand dat langzamerhand op een roman begint te lijken. Misselijk vol met commentaar, extra spaties of regels die je vergeten bent te verwijderen. Het werkt — prima — maar het is omslachtig. Maakt dingen langzamer. Verontrustend, toch?

Daar komt een CSS-minifier goed van pas. Het is geen magie, maar het komt er dichtbij. Je plakt je rommelige, voor mensen leesbare CSS erin, en het geeft een compacte, geoptimaliseerde versie terug. Geen omslachtigheid. Alleen wat de browser daadwerkelijk nodig heeft. Het verwijdert witruimte, haalt commentaar weg, verkort kleurcodes en combineert soms zelfs regels. En dat alles zonder je stijlen te breken.

Ik heb al tientallen van deze tools gebruikt door de jaren heen. De meeste zijn prima. Sommige zijn omslachtig. Een paar zijn zelfs behoorlijk elegant. Maar ze doen allemaal dezelfde basiswerkzaamheid: je CSS kleiner maken. En kleiner betekent meestal sneller laden. En dat, laten we eerlijk zijn, is wat we allemaal willen.

Belangrijkste functies

• Verwijdert overbodige witruimte en regelafbrekingen — want je browser geeft niks om je opmaak.
• Haalt commentaar weg. Ja, zelfs die notitie die je voor jezelf in 2019 hebt achtergelaten.
• Verkort hex-kleuren indien mogelijk — #ffffff wordt #fff, want waarom meer typen dan nodig is?
• Combineert dubbele selectors en eigenschappen wanneer dat veilig is.
• Behoudt functionaliteit. Je lay-out zal niet breken. (Meestal.)
• Werkt direct. Geen registratie, geen download. Gewoon plakken en klaar.
• Heeft meestal een “herstellen”- of “verfraaien”-optie, voor als je de uitvoer later moet lezen.

Veelgestelde vragen

Zal minificeren mijn website breken?
Zelden. De meeste minifiers zijn voorzichtig. Maar als je CSS vreemde trucs bevat of afhankelijk is van specifieke opmaak (zoals bepaalde @import-regels), kunnen dingen misgaan. Test altijd na minificeren. En hou een back-up. Echt waar.

Moet ik minificeren tijdens de ontwikkeling?
Nee hoor. Houd je originele bestand schoon en leesbaar tijdens het werken. Minificeer alleen als je klaar bent om te deployen. Gebruik source maps als je je zorgen maakt over debuggen later.