CSSO: CSS Minimizer

16. Oktober 2013 · Kategorien: CSS Stylesheets, Internet, Webentwicklung

CSS Minimizer

Der CSSO – CSS Minimizer ist eine schnelle, zuverlässige Möglichkeit, Deinen CSS-Code zu minimieren.
Dabei werden – wie bei den meisten CSS Minimizern – nicht nur Leerzeichen entfernt.
Das Tool steht unter der MIT Lizenz und kann demzufolge – auch in kommerziellen Projekten – frei verwendet werden.

CSSO – Features

Folgende Möglichkeiten sorgen dafür, dass Dein CSS-Code kleiner wird:

  • Leerzeichen werden entfernt
  • Kommentare werden entfernt
  • Farbangaben werden minimiert
  • Minimierung mehrzeiliger Zeichenketten
  • Zusammenfügen von Blöcken mit identischen Selektoren
  • Zusammenfügen von Blöcken mit identischen Eigenschaften
  • Entfernung von Eigenschaften, die nachträglich überschrieben werden
  • Entfernung von Selektoren, die sich wiederholen
  • Partielles Verbinden von Blöcken, sofern sinnvoll
  • Partielles Teilen von Blöcken, sofern sinnvoll
  • Minimierung von Margin-, Padding und Border-Attributen
  • … und noch mehr

CSSO – Installation

Du kannst CSSO direkt bei Github herunterladen, ich empfehle aber die Installation über den NodeJS Packet Manager (sowohl Linux als auch Mac OS):

npm install csso -g

Das hat einerseits den Vorteil, dass Du das Programm von jedem Verzeichnis aus global öffne und dass Du es mit folgendem Befehl aktualisieren kannst:

npm update csso

CSSO ist natürlich ein klasse Tool, sonst würde ich es Dir hier ja nicht empfehlen. Solltest Du trotzdem später auf die Idee kommen, es deinstallieren zu wollen…

npm uninstall csso

Anwendung des CSSO – CSS Minimizer

Ihr wechselt in der Konsole in das Verzeichnis, in dem eure CSS-Datei liegt.
Nehmen wir an, eure CSS-Datei hat den Dateinamen style.css und die neue, minimierte Datei soll style.min.css lauten.
Um die Minimierung durchzuführen, gebt ihr folgenden Befehl ein:

csso -i style.css -o style.min.css

Beispiel für eine CSSO Minimierung

Vorher:

.box
{
	margin-left: 1px;
	margin-right: 2px;
	margin-bottom: 3px;
	margin-top: 4px;
}

.box
{
	background-color: #ffffff;
}

Nach der CSS Minimierung:

.box{margin:4px 2px 3px 1px;background-color:#fff}

Funktioniert also ganz gut…

Testweise habe ich auch mal die aktuelle Style-Datei von WordPress.org minimieren lassen und die Dateigröße minimierte sich immerhin von 30 Kilobyte auf 25 Kilobyte.

Weitere Informationen zum CSSO findest Du auf der Seite des Entwicklers unter
CSSO CSS Minimizer auf Bem.info

Autor: | Kategorien: CSS Stylesheets, Internet, Webentwicklung

Keine Kommentare zu CSSO: CSS Minimizer

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *