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-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 über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Erdal
Gast
3 Jahre 5 Monate her

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.

Dieter Petereit
Gast
3 Jahre 5 Monate her

Stimmt. Der Aspekt ist mir gar nicht in den Sinn gekommen.

Viktor Dite
Gast
Viktor Dite
3 Jahre 5 Monate her

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
Gast
3 Jahre 5 Monate her

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
Gast
Viktor Dite
3 Jahre 5 Monate her

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

Pit
Gast
Pit
3 Jahre 5 Monate her

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
Gast
3 Jahre 5 Monate her

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

Andreas
Gast
3 Jahre 4 Monate her

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

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen