Archiv

Über Umwege bin ich just über einen CSS-Kurs gestolpert, der in wöchentlichen Lektionen so lange ausgebaut werden soll, bis der Leser ein Styling-Experte ist (und der Anbieter des Kurses oft genug seinen $60 kostenden Editor verkauft hat). Für sich genommen mäßig interessant, aber der Fund bringt jetzt dazu, eine Frage abzutippen, die mich schon länger beschäftigt: Wie strukturiert man am besten komplexes CSS?

Bei etwas aufwändigeren Projekten wird zumindest bei mir auch die zentrale CSS-Datei recht groß. Das gilt umso mehr, wenn das Projekt nicht von A nach B in einem Zug umgesetzt wurde, sondern steig wächst. Die style.css dieses Blogs wiegt als Folge eines solchen Wachstumsprozesses mittlerweile saftige 13,4 KB. Die Frage stellt sich, wie man diese vielen Informationen sortiert.

Im CSS-Kurs werden dem Anfänger folgende Zeilen als beispielhaft vorgesetzt:

body{
font-family: verdana, "minion web", helvetica, sans-serif;
font-size: 1em;
text-align: justify;
}
h1{
font-family: verdana, sans-serif;
font-size: 1.3em;
}
code{
font-family: courier, sans-serif;
font-size: 1em;
}

So einfach kann man es machen, keine Frage. Das ist nach meinem Eindruck auch die häufigste Variante, die man findet wenn man in fremden CSS-Dateien schnüffelt. Auch die Variante mit zusätzlichem Tabulator ist verbreitet.

.clear {
	clear: both;
}

.clear_fusion {
	clear: both;
	line-height: 1px;
	height: 1px;
	font-size: 1px;
}

Die Tabulator-Methode in Firebug.

Firebug zeigt ebenfalls CSS in dieser Form an und an fast allen Ecken und Enden des Internets sieht man CSS so strukturiert. Der Vorteil davon ist durchaus ersichtlich: Man kann jedes Element Zeile für Zeile inspizieren und hat alle Eigenschaften der Reihe nach aufgelistet. Das erhöht die Übersichtlichkeit.

Ich persönlich bin aber von diesem Format schon länger nicht mehr überzeugt und behaupte: Bei wirklich komplexem CSS ist an dieser Stelle diese Form der Übersichtlichkeit weniger nötig als an anderer bzw. die Übersichtlichkeit in der Liste der Elemente ist auch anders zu erreichen.

Vielleicht ist das nur mein persönlicher Eindruck, aber verschachtelte Elemente finde ich wesentlich übersichtlicher als zeilenweise aufgeführte CSS-Eigenschaften. Entsprechend rücke ich mein CSS ein. Ein Beispiel:

#navi { position:absolute; bottom:-8px; left:0; }
  #navi li { display:inline; }
    #navi li a { font-variant:small-caps; background:none; text-decoration:none; display:block; width:144px; height:48px; float:left; text-align:center; background:url(img/navi.jpg) no-repeat top center; margin:0 4px; padding:24px 0 0 0; }
      #navi li a:link, #navi li a:visited { color:#59514C; }
      #navi li a:active, #navi li a:hover { color:#000; }
    #navi li.active a { background:url(img/navi-active.jpg) no-repeat top center; }
      #navi li.active a:link, #navi li.active a:visited { color:#000; }
      #navi li.active a:active, #navi li.active a:hover { color:#A82A2A; }

#foot { background:#A82A2A url(img/foot.jpg) repeat-y top center; color:#F2E9DF; margin:0; padding:8px 0; }
  #foot li { display:inline; margin:0 8px; }
    #foot li a:link { color:#FFF; text-decoration:underline; }
    #foot li a:visited { color:#F2ECE6; text-decoration:underline; }
    #foot li a:active, #foot a:hover { color:#A82A2A; background-color:#FFF; text-decoration:none; }

Dass dies der genaue Gegenentwurf zu den obrigen Modellen ist, ist offensichtlich. Man findet schneller sein zu formatierendes Element, muss dafür dann aber in der Kette der Eigenschaften die Anweisung suchen, die man bearbeiten möchte. Aus dreierlei Gründen ziehe ich dieses Modell aber vor:

1. Wenn man Default Stylesheets zum Einsatz bringt, muss man nicht mehr jedem HTML-Element seine willkürlichen Margins und Paddings austreiben. Das verkürzt die Eigenschaftslisten.
2. Durch Kurzangaben und Zusammenfassungen kann man viel Länge einsparen. Will man beispielsweise die Farbe Rot ausdrücken, kann man statt #FF0000 genau so gut #F00 oder einfach red schreiben. Man muss auch nicht sowohl background-color als auch background-image und background-position angeben, sondern kann all das unter background vereinigen. Wieder ein paar Zeichen gespart.
3. Schließlich hilft ein festes Zeilenschema beim Wiederfinden von einzelnen Eigenschaften. Mein persönliches Zeilenschema sieht in der Regel so aus:
   element { positionierung; schriftformatierung; hintergrund; margin; padding; }
   Hat man ein solches Schema einmal verinnerlicht, wird auch das Navigieren längerer Zeilen zum Kinderspiel.

Ich habe den Eindruck, dass mir die Kombination aus meiner Einrückmethode und meinem festen Zeilenschema die Arbeit an wirklich verschachtelten CSS-Dateien deutlich erleichtert.

Irgendein tief vergrabenes Element hat einen falschen Margin? Das Elternelement ist in einem Stylesheet mit wenigen Zeilen sowie Absätzen und Kommentaren schnell gefunden, das Ziel lässt sich nur drei Zeilen auch sofort orten. Weil ich weiß, dass in meinem Zeilenschema der Margin immer am Ende steht, ist auch dieser mittels Ende-Taste sofort erreicht. Problem gelöst.

Der Hauptstylesheet dieses Blogs hat mit meiner Einrückmethode immer noch 238 Zeilen. Würde ich da auch noch jeder Eigenschaft statt nur jedem Element eine eigene Zeile gönnen, müsste ich mir für jede Änderung einen Wolf scrollen.