CSS Minifier

Was ist CSS Minification?

CSS Minification optimiert CSS-Code durch Entfernen von überflüssigen Zeichen: Whitespace, Kommentare, letzte Semicolons und mehr. Das Ergebnis ist funktional identisch, aber deutlich kleiner.

Was wird optimiert?

• Whitespace: Leerzeichen, Tabs, Zeilenumbrüche
• Kommentare: /* Kommentare */
• Letzte Semicolons: {color:red;} → {color:red}
• Überflüssige Nullen: 0.5em → .5em
• Farbkürzel: #ffffff → #fff
• Einheiten bei 0: 0px → 0

Beispiel: Vorher/Nachher

Vorher (formatiert):

/* Header Styles */
.header {
    background-color: #ffffff;
    padding: 20px 0px;
    margin: 0px;
}

.header h1 {
    color: #333333;
    font-size: 2.0em;
    font-weight: bold;
}

Nachher (minified):

.header{background-color:#fff;padding:20px 0;margin:0}.header h1{color:#333;font-size:2em;font-weight:700}

Erweiterte Optimierungen

• Shorthand Properties: margin-top + margin-right + ... → margin
• Duplikate entfernen: Doppelte Selektoren/Regeln
• Vendor Prefixes: Veraltete Präfixe entfernen
• Font-Weight: bold → 700, normal → 400

Tools für CSS Minification

• cssnano: PostCSS-Plugin, sehr umfangreich
• clean-css: Node.js, schnell und effektiv
• Terser: Für CSS (und JS)
• PurgeCSS: Entfernt ungenutztes CSS

Build-Integration

// PostCSS mit cssnano
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

// Webpack (css-minimizer-webpack-plugin)
optimization: {
  minimizer: [
    new CssMinimizerPlugin(),
  ],
}

Minification vs. Compression

Häufig gestellte Fragen

Verändert Minification meine Styles?

Nein, die visuelle Darstellung bleibt identisch. Es werden nur für den Browser irrelevante Zeichen entfernt. Immer testen zur Sicherheit!

Was sind Source Maps?

Source Maps verknüpfen minified CSS mit den Originalquellen. Browser DevTools können so den Original-Code anzeigen, obwohl die komprimierte Version läuft.

Sollte ich PurgeCSS auch nutzen?

PurgeCSS entfernt ungenutztes CSS (Dead Code) – oft größere Einsparungen als Minification allein, besonders bei großen Frameworks wie Tailwind.