CSS Minifier

Vad minifieraren gör

Transformationer (ändrar aldrig beteendet):

• Tar bort kommentarer (alla, inklusive /*!-licensblock).
• Tar bort onödig whitespace (mellan selektorer, deklarationer, klamrar).
• Tar bort avslutande semikolon före stängande klamrar.
• Kollapsar flerradiga regler till en rad.

Mer än så gör den inte, och därför beter sig outputen exakt som originalet: varje selektor, egenskap och värde förblir som du skrev det.

Typiska besparingar

Ovanpå minifiering lägger gzip-komprimering på servern till ytterligare 60-80% besparing eftersom CSS är högst redundant. De två staplas; gör alltid båda.

Vad minifiering inte gör

• Tar inte bort oanvänd CSS. Det är tree-shaking / PurgeCSS-område, vilket kräver att analysera din HTML eller komponenter.
• Kortar inte hex-färger, kollapsar inte noll-enheter och slår inte samman deklarationer. De aggressiva transformationerna är jobbet för cssnano, esbuild eller Lightning CSS, inte det här verktyget.
• Slår inte ihop dubblerade selektorer till en. Riskabelt eftersom källordning påverkar kaskaden; vissa minifierare försöker, de flesta hoppar över det.
• Döper inte om klasser. Det är CSS-in-JS eller CSS Modules, inte minifiering.
• Inlinerar inte critical CSS. Det är ett separat build-time-steg.

Bevara licens-kommentarer

Många minifierare bevarar kommentarer som börjar med /*!, används för licens-headers:

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

Det här verktyget tar bort alla kommentarer. Om din CSS innehåller licens-headers får du lägga tillbaka dem efter minifieringen, eller använda ett build-verktyg med alternativ för att bevara licenser, som cssnano eller esbuild.

Source maps

För produktionsdebugging genererar build-verktyg en source map vid sidan av den minifierade outputen:

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

DevTools kan läsa mappen och visa dig de ursprungliga pretty-printade radnumren när du inspekterar ett element. Det här verktyget genererar inte source maps.

CSS-minifiering i en build-pipeline

• Vite, Webpack, Parcel: hanterar detta automatiskt i produktions-builds.
• PostCSS med cssnano: den vanliga fristående minifieraren.
• esbuild: inkluderar också CSS-minifiering.
• cssnano-presets: default för säkra transformationer, advanced för aggressiva (med vissa avvägningar).

Det här verktyget är för engångs-minifiering, snabba fixar och för att lära sig vad minifierare faktiskt gör. För ett produktions-workflow, använd ett build-verktyg så att din källa förblir läsbar och bara outputen är minifierad.

När minifiering kan bryta din CSS

Sällsynt men möjligt:

• Whitespace-känsliga selektorer: .foo .bar vs. .foo.bar, mellanslaget spelar roll.
• Custom property-värden med mellanslag: --shadow: 0 2px 4px rgba(0,0,0,0.1), kommatecknen inuti rgba() får inte tas bort.
• Ostängda block-kommentarer: /* missing close äter upp allt efter sig. Minifierare kan bete sig fel på illa formad input.

Fixet: kör alltid din minifierade output genom en lint/test-pass innan du skickar.