Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Das Styling der Anderen

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Das Styling der Anderen

Von Zeit zu Zeit werden Webworker mit fremden CSS-Dateien konfrontiert. Gerade wenn sie von jemanden erstellt wurden, der unerfahrenen mit CSS ist, ist es wichtig, sich einen Überblick über die Dateien zu verschaffen. Eric Eggert zeigt, wie er diese Aufgabe angeht.

Um fremde CSS-Dateien überarbeiten und organisieren zu können, ist es zuerst einmal wichtig, sich einen Überblick zu verschaffen: Wie viele Dateien gibt es? Wie sind sie organisiert? Sind die Dateien kommentiert?

Oft gibt es nur eine sehr große CSS-Datei, die mit Hilfsmitteln wie dem CSS Beautifier in eine lesbare Form gebracht werden, falls sie minimiert wurde. Viele Tools zur Bearbeitung von CSS bieten diese Funktion ebenfalls an. Auch ein Besuch beim Validator sollte zur Erstprüfung dazu gehören. Dessen Ergebnisse sind zwar nicht sehr aussagekräftig, helfen jedoch bei der Bewertung der Qualität des CSS.

Anschließend ist es sinnvoll, sich einen visuellen Überblick zu verschaffen. Dazu könnt ihr Firebug oder ähnliche Werkzeuge benutzen, ich benutze CSSEdit für Mac OS. Es ist sogar möglich, damit Live-Seiten testen und zu bearbeiten. Der Screenshot zeigt yaml.de. Ich habe mir diese Seite herausgesucht, weil YAML komplexe Klassennamen und mehrere Stylesheets einsetzt. Im X-ray-Modus ist ein Absatz im Downloads-Block auf der rechten Seite markiert. Jeder sieht so auf einen Blick, wie die Verschachtelung der Elemente bis zu diesem Absatz aussieht, breadcrumb-artig sehen wir u.a. div#main > div.first > div.subcolumns > div.c33r > div.subcr > div.download > p, die DOM-Struktur bis zum angewählten Element.

Screenshot CSSEdit

Im Inspector (im Screenshot rechts) sieht man zudem, welche CSS-Regeln auf das Element angewendet werden, inklusive in welcher Datei diese zu finden ist. Ein Klick auf die Regel öffnet bei lokalen HTML-Dateien die entsprechende CSS-Datei zur Bearbeitung.

Bei der Reorganisation von CSS ist einiges zu beachten: So sollte die grundlegende Reihenfolge von ähnlichen Selektoren aufgrund der Spezifität beibehalten und Änderungen sofort im Browser überprüft werden. Hilfreich ist auch das Anlegen von Gruppen, wie sie CSSEdit besitzt. Die Gruppierung sollte anhand der identifizierbaren Teile des Layouts geschehen.

Wer vermutet, dass das Stylesheet über längere Zeit gewachsen ist und Anweisungen enthält, die nicht mehr benutzt werden, kann sich mit das Firefox-Plugin Dust-Me Selectors zur Hilfe nehmen. Diese Methode ist nicht ganz zuverlässig und generell ist es ratsam, vor dem Löschen von Selektoren/Anweisungen diese auszukommentieren und zu beobachten, wie es sich auf die Webseite auswirkt.

Selektoren sollten zudem so einfach wie möglich gehalten werden. #bd > div > #teaser .maintext { color: #000; } kann in den meisten Fällen durch #teaser p {…} oder gar nur p {…} ersetzt werden, etwa wenn alle Absätze die gleiche Farbe haben. Das sorgt nicht nur für ein verbessertes und klareres CSS, sondern es vereinfacht auch die zukünftige Wartung.

Ein komplexes CSS so zu übernehmen und zu optimieren ist viel Arbeit, die sich allerdings lohnen kann, da vor allem beim Einsatz von vielen IDs Insellösungen entstanden sein können. Die Grundsätze, die Nicole Sullivan für ihr Object Oriented CSS festgelegt hat sind ein guter Orientierungspunkt um CSS wiederverwendbar zu schreiben.

Die Kommentare sind geschlossen.