CSS Ratiocinator und Trashman: Müllabfuhr für Stylesheets?

Es ist ein markiger Slogan, mit dem Joe Nelson aka Begriffs seinen Qualitätsverbesserer für CSS-Stylesheets ins Rennen schickt. „CSS Ratiocinator – because your CSS is garbage“, behauptet er. So, unser CSS ist also Mist, Abfall, Unrat? Neben dem Slogan relativiert Nelson diese Behauptung zwar und wenn man dann tiefer einsteigt, ist man sogar geneigt, ihm – bei allen körperlichen Schmerzen, die diese Erkenntnis verursacht – wenigstens bei stark evolutionär verlaufenden Kundenprojekten teilweise zuzustimmen. Am Ende erkennt man, dass Ratiocinator ein wertvolles Tool ist, dass man nicht mehr missen möchte…

CSS-Stylesheets und ihre Tendenz zu verwildern

Ich muss schon sagen, dass ich mich zunächst einer gewissen Verärgerung über Nelsons vollmundige Generalabwertung nicht entziehen konnte. Wer hört schon gern, dass er Abfall produziert, speziell dann, wenn es quasi um die schönen Künste geht… Lässt man sich dann jedoch etwas auf das Thema ein und reflektiert einige seiner älteren Projekte, so, zumindest ging es mir so, erscheint die Aussage zwar noch überzogen, aber nicht an den Haaren herbeigezogen.

Ich betreue verschiedene Projekte, die schon sehr alt sind. Und mit sehr alt meine ich zehn Jahre und älter. Natürlich hatten diese Projekte zum Zeitpunkt der Fertigstellung eine ordentliche Ausstattung mit CSS-Stylesheets. Aus einem Guss waren die, möchte ich behaupten, andere Meinungen mag es da aber auch geben.

Mit der Zeit kamen die Veränderungen, wie neues Logo, andere Farben, weitere Serviceangebote, mobile Version und was nicht alles im Laufe der Jahre auf so einer Website passieren kann. Schön, wenn man einen Kunden hat, der bereit ist, auch immer brav die Generalanpassung des Grunddesigns zu bezahlen. Meiner Erfahrung nach ist das jedoch extrem selten der Fall. Und so geschieht, was geschehen muss. Das CSS wird – sagen wir – punktuell und auf die Neuerungen isoliert erweitert.

Dies führt dazu, und das konstatiert Nelson versöhnlicherweise schlussendlich auch, dass das Stylesheet eben nicht mehr aus einem Guss ist, sich Anweisungen teilweise widersprechen, aufheben und/oder unnötig komplex verschachtelt sind, so dass es zu ulkigen Effekten kommen kann.

CSS Ratiocinator schreibt das Stylesheet neu

An dieser Stelle kommt Nelsons Werkzeug CSS Ratiocinator, das er selbst als Code-Quality-Tool bezeichnet, ins Spiel. Der Ratiocinator schreibt ein homogenes Stylesheet völlig neu und berücksichtigt dabei den aktuellen Stand der Technik. Zu diesem Zweck nimmt er nicht etwa das bereits bestehende Stylesheet, analysiert und optimiert es. Vielmehr liest er direkt aus dem DOM und baut daraus ein eigenständiges, die bisherigen Definitionen nur quasi optisch berücksichtigendes Stylesheet zusammen.

Um als Verwender von Ratiocinator zu profitieren, kann man einen von drei Wegen gehen. Um die Prüfung und das Rewriting lokal durchführen zu können, ist es erforderlich PhantomJS zu installieren, das Ratiocinator-Repository zu klonen und dann in PhantomJS aufzurufen. So wird das optimierte CSS erzeugt. Einfacher ist der Weg über ein JavaScript, das als Bookmarklet hinterlegt wird und den gleichen Effekt erzielen soll. Dieser Weg hat jedoch in meinen Tests nicht sauber funktioniert.

Die einfachste Methode, die auch die wenigsten manuellen Zwischenschritte benötigt, stellt der Aufruf der zu optimierenden Website über deren URL im Webservice CSS Trashman dar. Dieser Weg ist für ältere Projekte, die auch den Hauptanwendungsfall darstellen dürften, natürlich gangbar. In Entwicklung befindliche Seiten, die nur lokal existieren, sollten über den PhantomJS-Weg behandelt werden.

Der Webservice CSS Trashman integriert neben Ratiocinator auch direkt das Tool Sass-Convert, bietet mithin als Ergebnis nicht nur ein optimiertes CSS, sondern auch ein optimiertes Sass-File an. Die Möglichkeit, sich Seite an Seite das bisherige und das neue CSS anzeigen zu lassen, ist zwar schon vorgesehen, aber noch nicht funktional.

CSS Ratiocinator steht unter der liberalen MIT Lizenz sowohl für private, wie auch kommerzielle Zwecke zum Download auf Github bereit. Das Tool wird auf jeden Fall einen Stammplatz in meinem Werkzeugkasten bekommen und wenn es letztlich nur dazu dient, eine zweite Meinung einzuholen.

Links zum Beitrag:

• CSS Ratiocinator | Github Repository
• CSS Trashman | Webservice auf Basis des Ratiocinator
• Move You Existing Stylebase Over to Sass (or SCSS), Effortlessly With sass-convert. | Perezium