CSS Stylesheets optimieren und formatieren
Der Artikel stellt ein kostenloses Online-Tool vor mit dem Sie Ihre CSS-Dateien ordnen und optimieren können.
Die Erstellung eines Stylesheets ist in der Regel ein iterativer Prozess. Es kommen immer und immer wieder Änderungen und Anpassung an vorhandene Styles hinzu. Dadurch kann die Datei irgendwann ziemlich durcheinander und dementsprechend auch unnötig groß werden.
Bei Six Revision wurden mehrere interessante Tools zur Optimierung von CSS vorgestellt. Ich möchte hier meinen Favoriten und die Funktionsweise der Optimierung kurz erläutern.
Der CSS Optimierer und Formatierer basiert auf csstidy und kann den CSS-Quelltext sortieren, formatieren und teilweise auch optimieren. Wie genau funktioniert das nun?
- Zunächst kann man seine erstellen Styles alphabetisch sortieren lassen. Das ist noch keine direkte Optimierung erhöht aber die Lesbarkeit.
- Es können alle definierten Eigenschaften, wenn möglich, zu Shortcuts zusammengefasst werden. Aus margin-top: 10px und margin-left 10px wir so margin: 10px. Dadurch kann man häufig einiges an Quelltext einsparen.
- Farben werden in die kurze hexadezimale Schreibweise transformiert. Aus color: white wird entsprechend color:#fff.
- Unnötige Umbrüche und Leerzeichen können entfernt werden.
All diese Optimierungsmöglichkeiten können konfiguriert werden. Dadurch kann man je nach Geschmack immer noch die Balance zwischen Lesbarkeit und Optimierung wahren.
Die Resultate sehen wirklich hervorragend aus und haben bei meinen Tests, je nach Einstellung, zwischen 20 und 35% Einsparung der Dateigröße gebracht.
Wenn Ihnen dieser Artikel gefallen hat, hinterlassen Sie bitte einen Kommentar oder abonnieren Sie den meshed News-Feed.
[…] Mit Hilfe von CSS-Compressors können die Ladezeiten und die Größe der Stylesheets deutlich verringert werden. Die Tools fassen dazu verschiedene CSS-Eigenschaften zusammen und entfernen unnötige Zeichen. Man kann z.B. alle Umbrüche und Tabs entfernen, um die Dateigröße zu verringern. Die genaue Funktionsweise und weitere Einstellungen erläutert “CSS Stylesheets optimieren und formatieren“. […]