Grunt: unbenutzte Css-Deklarationen entfernen mit UnCSS

von

Bootstrap als Starterkit zu nutzen, ist eine schöne Sache, wie auch hier beschrieben. Es kann aber dazu kommen, daß man sich auch für kleine Projekte mit 50k+ Stylesheets konfrontiert sieht, selbst wenn man nur die tatsächlich genutzten *.less Files einbindet.

// Core CSS
@import "scaffolding.less";
@import "type.less";
//@import "code.less";
@import "grid.less";
//@import "tables.less";
@import "forms.less";
@import "buttons.less";
...

Das schöne Firefox Addon Dust-Me Selectors meckerte dann heute auch bei mir, daß ca. 800 Css Selektoren seitenweit nicht genutzt sind. Nach einem kurzen, verzweifelten Versuch, die entsprechenden Deklarationen in den Bootstrap Less Files händisch auszukommentieren, warf ich das Handtuch, suchte und fand eine automatisierte Lösung: Grunt UnCSS.

In den Wordpress Roots Gruntfile.js war die Grunt task schnell eingebaut. Einzig daß ich keine lokalen Files scanne, sondern eine Live Entwicklungsumgebung habe, hat kurz Kopfzerbrechen bereitet, als die Fehlermeldung

Destination (assets/css/main.min.css) not written because src files were empty.

auftauchte. Ein Workaround brachte dies aber schnell in Ordnung. Danach musste ich nur noch die Featherlight Css Klassen, welche per Javascript injiziert werden und daher von UnCSS nicht scannbar sind, in den Options ausschließen.

Mein Ergebnis ist eine 16k Css Datei, die keinen einzigen überflüssigen Character enthält. Danke, Addy Osmani!

Kommentieren