CSS Minifier

Wat de minifier doet

Transformaties (veranderen nooit het gedrag):

• Commentaar verwijderen (alles, inclusief /*!-licentieblokken).
• Onnodige witruimte verwijderen (tussen selectors, declaraties, accolades).
• Afsluitende puntkomma’s vóór sluitaccolades verwijderen.
• Regels over meerdere regels op één regel platslaan.

Meer doet hij niet, en daarom gedraagt de uitvoer zich exact hetzelfde als het origineel: elke selector, property en waarde blijft zoals je hem schreef.

Typische besparingen

Bovenop minificatie levert gzip-compressie op de server nog 60-80% besparing op, omdat CSS sterk redundant is. De twee stapelen; doe altijd beide.

Wat minificatie niet doet

• Ongebruikte CSS verwijderen. Dat is tree-shaking / PurgeCSS-territorium en vereist analyse van je HTML of components.
• Hex-kleuren verkorten, zero-units collapsen of declaraties samenvoegen. Die agressieve transformaties zijn het werk van cssnano, esbuild of Lightning CSS, niet van deze tool.
• Dubbele selectors tot één samenvoegen. Riskant omdat de bronvolgorde de cascade beïnvloedt; sommige minifiers proberen het, de meeste slaan het over.
• Classes hernoemen. Dat is CSS-in-JS of CSS Modules, geen minificatie.
• Critical CSS inline plaatsen. Dat is een aparte build-time-stap.

License-comments behouden

Veel minifiers behouden comments die met /*! beginnen, gebruikt voor license-headers:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

Deze tool verwijdert alle comments. Bevat je CSS license-headers, voeg ze dan na het minificeren weer toe, of gebruik een build tool met een optie om licenties te behouden, zoals cssnano of esbuild.

Source maps

Voor production-debugging genereren build tools een source map naast de minified output:

styles.min.css
styles.min.css.map

DevTools kunnen de map lezen en je de originele pretty-printed regelnummers tonen wanneer je een element inspecteert. Deze tool genereert geen source maps.

CSS-minificatie in een build-pipeline

• Vite, Webpack, Parcel: handelen dit automatisch af in production-builds.
• PostCSS met cssnano: de standaard stand-alone minifier.
• esbuild: bevat ook CSS-minificatie.
• cssnano-presets: default voor veilige transformaties, advanced voor agressieve (met enkele afwegingen).

Deze tool is voor eenmalige minificatie, snelle fixes en om te leren wat minifiers daadwerkelijk doen. Gebruik voor een productie-workflow een build tool, zodat je bron leesbaar blijft en alleen de output geminified wordt.

Wanneer minificatie je CSS kan breken

Zeldzaam maar mogelijk:

• Whitespace-gevoelige selectors: .foo .bar vs. .foo.bar, de spatie maakt uit.
• Custom-property-waarden met spaties: --shadow: 0 2px 4px rgba(0,0,0,0.1), de komma’s binnen rgba() mogen niet worden gestript.
• Onafgesloten block-comments: /* missing close eet alles erna op. Minifiers kunnen zich misdragen op misvormde input.

De fix: laat je minified output altijd nog een lint/test-pass doorlopen voordat je hem uitrolt.