CSS

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

1. Februar 2013
von

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-ratiocinator-01

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.

css-ratiocinator-02

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.

css-ratiocinator-03

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.

css-trashman-results

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:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , ,

8 Kommentare zu „CSS Ratiocinator und Trashman: Müllabfuhr für Stylesheets?
  1. Erdal am 1. Februar 2013 um 15:11

    Das ist ein echt guter Ratschlag. Kann ich bestimmt bald einsetzen. Dass CSS mit der Zeit “verwildert”, kenne ich. Naja und manchmal übernimmt man ja auch Projekte anderer.

  2. Viktor Dite am 1. Februar 2013 um 18:31

    Kann das Dingen nur eine Seite optimieren oder alle Seiten eines CMS crawlen und optimieren? Wenn letzteres nicht, dann ist es mal wieder völlig nutzlos ;(

    • Dieter Petereit am 1. Februar 2013 um 22:23

      Es empfiehlt sich, eine Seite als Style Guide zu haben. Hat man das, kann Ratiocinator alle Styles bauen. Hat man das nicht, kann Ratiocinator das nicht. Aber nur: noch nicht. Der Entwickler arbeitet daran. Das Projekt ist noch brandneu.

      • Viktor Dite am 2. Februar 2013 um 11:22

        das wär ein großes Novum im Bereich der Style-Optimizer

  3. Pit am 2. Februar 2013 um 10:49

    Naja, “nettes” Experiment. Praxistauglich eher nicht. Das Ding zerlegt Shortcuts in Einzelanweisungen. Macht so z.B. aus einem kurzen und knackigen

    margin: 10px;

    sowas

    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;

    Dasselbe mit den Paddings und den Backgrounds. Den Slogan finde ich einfach nur dämlich, wenn man nicht wirklich von Anfang an überzeugen kann. Das mit dem “Styleguide” wird bei komplexen Layouts nie zuverlässig funktionieren und zum rumspielen habe ich keine Zeit.

    • Dieter Petereit am 4. Februar 2013 um 12:34

      Interessant. Mein Stylesheet hat er nicht in Einzelanweisungen zerlegt. Da ist margin margin geblieben.

  4. Andreas am 27. Februar 2013 um 23:02

    Hallo Dieter, danke für den Bericht. Meine css-Datei ist während der Website-Erstellung so unübersichtlich und voller “Leichen” geraten, dass es von Analyse-Tools regelmäßig angemahnt wird. Werde dein vorgeschlagenes Tool auf jeden Fall ausprobieren. Gruß, Andreas

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!