Open top menu

ProCSSor – Der CSS Prettifier

Sagen wir mal so: Es existieren für verschiedene Sprachen durchaus Standards, wie Quelltext auszusehen hat, aber keiner hält sich dran. Für das Zend Framework zum Beispiel existieren sehr strikte Regeln, interessiert keinen – geschweige denn das ich das schon einmal in einem Tutorial oder einem Buch gefunden hätte. Bewegen wir uns jetzt im Bereich des Web, wird die „Qualität“ des Ganzen, sind wir mal nett: grottig.

Screenshot des Code Prettifiers ProCSSor

Screenshot des Code Prettifiers ProCSSor

Mein absoluter Favorit in dem Bereich sind die Leute, die (warum auch immer) jedem Selector in einer CSS immerhin eine ganze Zeile spendieren. Da Editoren die dumme Angewohnheit besitzen, so etwas wie Wrapping zu besitzen wird dies erstmal ausgeschaltet und man sieht man Ende nicht mehr, was am Anfang steht. Das Resultat: doppelte Anweisungen. Die Tatsache das man in CSS auch Kommentare setzen könnte lasse ich an dieser Stelle mal unerwähnt – ich wäre ja froh, wenn man ab und an mal Javascript kommentieren würde  ;)

Tja, was ich mich so aufrege? Ich hab hier mal wieder eine Webseite übernommen, die so grottenschlecht ist, dass man am liebsten alles wegwerfen würde – das wiederum zahlt ein Kunde nicht (er hat ja eine Webseite die ihm gefällt) und dann kommen wir zum eigentlichen Problem: CSS in lesbare Form bringen bezahlt einem keiner – und wenn man es dann nicht schafft, schnell die gewünschte Lösung zu bringen, sieht es beim Kunden so aus, als ob man keine Ahnung hätte (immerhin hat das Vorgänger-Genie seinen Chaos voll durchblickt).

Was hilft? Ein Code Prettifier wirkt hier wahre Wunder. Er nimmt ein verhunztes Stück Quelltext und bringt es in eine von Menschen lesbare Form – manche können bei dieser Gelegenheit sogar noch schwachsinnige Anweisungen entfernen und helfen so ungemein weiter.

Im Bereich des CSS nutze ich den ProCSSor (dessen Name an sich schon einfach genial ist!) um CSS zumindest so anschauen zu können, dass ich keine Scroll-Arie vor mir habe. Das Ding eignet sich übrigens auch hervorragend um diverse Tab-Orgien des CSS-Erstellers zu bekämpfen. Alles in allem ein sehr nettes Tool, das man einmal eine fremde CSS gibt, um diese dann anschließend zumindest ohne Kopfschmerzen bearbeiten zu können.

Guido
Geschrieben von Guido

Guido Mühlwitz ist Freiberufler mit Schwerpunkt HTML5, Zend Framework 2 / Node.js und individueller WordPress Plugin Entwicklung. Wenn er sich nicht gerade bei Twitter über PHP aufregt, bloggt er über aktuelle Themen aus dem Bereich der Anwendungsentwicklung.

4 Antworten auf Kommentar

  1. Avatar
    Oktober 11, 2010

    Zu den Codingstandards muss ich dann auch mal widersprechen. Diese interessieren sehr wohl, gerade dann, wenn man im Team arbeitet. Gute IDEs können entsprechend konfiguriert werden und wenn im Unternehmen Continuous Integration Tools wie phpUnderControl oder Hudson eingesetzt werden, dann kann z.B. PHP CodeSniffer automatisch die Codingstandards für PHP, JS und CSS prüfen, damit sich auch jeder im Team dran hält. Da kann man dann sogar noch viel schönere Sachen zur Qualitätskontrolle einsetzen.

    Siehe dazu: http://phpundercontrol.org/ bzw. http://pear.php.net/package/PHP_CodeSniffer

    Antwort

  2. Avatar
    Oktober 04, 2010

    Also ich hab Eclipse PDT und damit kann man auch CSS-Dateien formatieren. Und das schöne ist, man kann sogar konfigurieren, wie das aussehen soll. =)

    Und zum Coding-Standard: Also bei uns in der Firma und auch im privaten Bereich hat sich ein Coding-Standard etabliert. Dafür haben wir direkt den Zend-Standard übernommen. Leider benötigt man für Eclipse PDT ein Plugin, damit man den Formatter mal sinnvoll einrichten kann. Ansonsten habe ich noch keine sinnvolle IDE gefunden wo man das einstelen konnte. (Außer phpStorm sieht noch gut aus, hab ich aber noch nicht getestet und die kostet auch Geld ;))

    Antwort

Leave a comment