compress CSS Minifier / Opmaker star

Hoe Het Werkt

Minifyen verkleint de bestandsgrootte door alles te verwijderen wat een machine-parser niet nodig heeft maar een menselijke lezer wel zou willen: commentaar, regeleinden, inspringing en de laatste puntkomma vóór een sluitende accolade. Niets daarvan is betekenisvol voor hoe een browser stijlen toepast — een stylesheet met elke regel op één regel en zonder witruimte gedraagt zich identiek aan een netjes opgemaakte versie, alleen kleiner en sneller te downloaden. Dit is van belang in productie omdat CSS de weergave van de pagina blokkeert totdat het is gedownload en geparseerd, dus het besparen van kilobytes op het bestand verbetert direct de laadsnelheid van de pagina, vooral op trage verbindingen.

Opmaken is de omgekeerde bewerking, en die is echt lastiger: het neemt gecomprimeerde of rommelige CSS en laat deze opnieuw inspringen met één declaratie per regel, één regel per blok, consistente spatiëring rond dubbele punten en accolades. Dit is een vorm van reverse engineering, want de originele opmaak — en vooral eventuele commentaar — is verdwenen zodra een bestand is geminificeerd; alleen de structurele opmaak (welke selector bij welke declaraties hoort) kan worden hersteld, niet de originele regeleinden of notities van de auteur. Bijvoorbeeld, .btn{color:red;padding:8px} wordt een correct ingesprongen blok met color: red; en padding: 8px; elk op hun eigen regel binnen .btn { }.

Wat U Moet Weten

• Beide richtingen behouden het gedrag exact. Selectors, eigenschappen, waarden en cascade-volgorde blijven onaangeroerd — alleen witruimte en commentaar veranderen, dus specificiteit en overerving werken identiek voor en na.
• Dit is een lichtgewicht, op regex gebaseerde tool, geen volledige CSS-parser (zoals PostCSS). Het verwerkt standaard CSS correct, maar inhoudswaarden met letterlijke {, } of ; tussen aanhalingstekens (in de praktijk zeldzaam, meestal gezien in gegenereerde content:-waarden) worden mogelijk niet perfect opgemaakt.
• Sass/Less-syntax wordt niet verwerkt. Nesting, variabelen en mixins zijn op zichzelf geen geldige CSS, dus ze gaan grotendeels ongewijzigd door in plaats van te worden gecompileerd — u heeft nog steeds Sass of Less zelf nodig om die eerst om te zetten naar platte CSS.
• Commentaar is het enige dat minify permanent weggooit. Als een commentaar een browserspecifieke hack documenteert of een "niet verwijderen"-waarschuwing bevat, bewaar dan ergens een kopie van de niet-geminificeerde bron — de gecomprimeerde uitvoer heeft geen manier om die terug te brengen.

Een concrete vergelijking: een opgemaakte regel zoals .card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); } minified naar .card{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)} — merkbaar korter, en over een volledige stylesheet met tientallen regels, commentaar en geneste media queries loopt die besparing doorgaans van 20% tot 40% van de originele bestandsgrootte.