Eine CSS-Datei ausmisten und überflüssigen Code entfernen
Eine CSS-Datei überarbeiten, die in die Jahre gekommen ist, kann mühsam sein. Der erste Schritt ist, herauszufinden, welche CSS-Angaben überhaupt noch aktuell sind.
Wenn ich mir eine CSS-Datei anschaue, die ich vor fünf Jahren geschrieben habe, wird mir anders. Aber das ist ein gutes Zeichen, denn wenn es nicht so wäre, hätte ich in der Zwischenzeit nichts gelernt.
Also tief durchatmen und einmal kräftig entrümpeln.
Es gibt einige Möglichkeiten, über Browser-Extensions oder über die Chrome Developer Tools herauszufinden, welches CSS auf einer Seite gerade nicht verwendet wird. Aber diese Methode taugt nur für einen schnellen, ersten Überblick. Denn anschließend müsste man das überflüssige CSS mühsam per Hand mit der CSS-Datei abgleichen. Kommt dazu, dass man nur das Ergebnisse für die aktuell aufgerufene Seite sieht.
Wir brauchen also ein kluges Script, das in der Lage ist, mehrere Seiten durchzugucken und das ein praxistaugliches Ergebnis in Form einer „bereinigten“ CSS-Datei ausspuckt.
Ausmisten mit Uncss
Ein Script, das das sehr gut macht, ist uncss von Giacomo Martino.
Ich habe mich für die Gulp-Variante entschieden. Geht aber auch via Grunt und npm.
Und so geht’s:
- Gulp und uncss installieren (falls nicht schon vorhanden)
- Im Theme-Verzeichnis einen Ordner namens uncss anlegen. Dort landet später die bereinigte CSS-Datei, die uncss erzeugt hat. Das Verzeichnis kann auch anders heissen, der Name wird im gulpfile.js angegeben.
- Das gulpfile.js erzeugen (Beispiel s.u.) und in das Verzeichnis legen, in dem man arbeiten will. Also z.B. das Verzeichnis, das das WordPress-Theme enthält.
- Per Terminal in dieses Verzeichnis navigieren und
gulptippen – und ab geht die Post.
Das Ergebnis ist eine verschlankte CSS-Datei im Verzeichnis uncss.
Inhalt gulpfile.js
var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('default', function() {
return gulp.src([
//Pfad zur CSS-Datei, die entruempelt werden soll
'/Users/kirsten/Sites/my-blog/wp-content/themes/my-blog-theme/style.css',
//hier kann noch ein Pfad hin
])
.pipe(uncss({
//URLs der Seiten, die das Script durchgucken soll
html: [
'http://my-blog.local/',
'http://my-blog.local/category/tipps-und-tricks/',
'http://my-blog.local/some-post/headline/',
'http://http://my-blog.local/category/stories/',
]
}))
.pipe(gulp.dest('uncss/'));
});
Die Grafik ist einfach großartig.
