Ich möchte hiermit den Beitrag nachreichen, den ich im Rahmen des Webkrauts Adventskalenders geschrieben habe. Wie der Titel schon sagt dreht es sich dabei um die Organisation von Stylesheets, denn diese können bei stetig wachsenden Seiten schnelle eine durchaus nicht so leicht überschaubare Größe annehmen.

Gruppierung

Durch gezieltes gruppieren gleichartiger Layoutelemente als da wären Listen, Links, Absätze und so weiter und so weiter entsteht die Möglichkeit, wie wir später sehen werden, schnell vom einen zum anderen zu springen, um somit das lästige hin- und herscrollen überflüssig werden zu lassen. Die einzelnen Gruppen könnte man z.B. so unterteilen:

• Allgemein
• Links
• Struktur
• Navigation
• Listen

Das soll uns als Auswahl genügen. Diese hier gewählten Unterpunkte des Stylesheets erheben keinesfalls Anspruch auf Vollständigkeit und sollten möglichst so gewählt werden, dass man erstens selbst später noch weiß was sie bedeuten sollen und sie, zweitens, dahingehend allgemein verständlich sind, dass wenn z.B. in Gruppen an einer Webseite gearbeitet wird, jedes Teammitglied unabhängig von den anderen aus dem Quellcode des Stylesheets erkennt welche Anweisungen welchen Teil der Seite beeinflussen.

Kennzeichnung der Gruppen

Wenn man einmal eine zufriedenstellende Auswahl getroffen hat ist es ratsam das Stylesheet zu allererst optisch zu trennen bzw. die einzelnen Gruppen von einander unterscheidbar zu machen. Eine Möglichkeit wäre z.B. folgende:

/* Navigation
===============================================*/
#menu {
float: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
width: 750px;
}
/*=============================================*/

Auf diese Weise fallen einem von einander getrennte Teile schneller ins Auge und durch den einführenden Kommentar (in unserem Beispielfall /* Navigation) bekommt das ganze gleiche eine Art Zwischenüberschrift, die erklärt welche Anweisungen sich in diesem Abschnitt des Stylesheets befinden. Das hat sich mit der Zeit als sehr praktisch erwiesen, ist aber dennoch noch nicht ganz perfekt.

Gezieltes Arbeiten

Um sich letztlich möglichst präzise durch die Stylesheets, die bei größeren Projekten durchaus eine Länge von 1000 Zeilen erreichen, bewegen zu können fehlt noch eine Kleinigkeit. Man sollte sich angewöhnen gut Freund mit der Suchfunktion (STRG + F) des Editors seines Vertrauens zu werden. Diese dient quasi als Fortbewegungsmittel innerhalb des Stylesheets. Wenn man, orientiert an obigem Beispiel, also gerade relativ weit unten im Stylesheet die Listen verfeinert und sich nun der Navigation widmen möchte gibt man seinem Taxifahrer also per Eingabe von Navigation zu verstehen wo man hinmöchte. Eigentlich reichen dabei die ersten drei Buchstaben zumeist aus. Allerdings ist die jetzige Unterscheidung innerhalb unseres Stylesheets noch etwas irreführend, da man durchaus mit IDs oder Klassen arbeiten kann, die auch mit Nav beginnen und schon wird die eigentlich sinnvolle Unterscheidung irreführend. Ein kleiner Trick schafft da Abhilfe:

/* =Navigation
===============================================*/
#menu {
float: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
width: 750px;
}
/*=============================================*/

Die einzige Veränderung, die wir noch vorgenommen haben ist das “Gleichheitszeichen” vor der “Zwischenüberschrift” im Stylesheet. Dieser kleine Effekt hat aber in der Praxis durchaus große Wirkung. Wenn man jetzt nämlich der Suchfunktion per =Nav zu verstehen gibt, dass man im Abschnitt der Navigation weiterarbeiten möchte, kommt man mit Sicherheit besser ans Ziel. Mit etwas Übung kann man sich auf diese Weise sehr schnell durch die Stylesheets bewegen und ganz nebenbei hat man sich noch eine Struktur geschaffen, die ggf. auch für andere leichter zugänglich ist.