Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Organisation großer CSS-Dateien

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

Organisation großer CSS-Dateien

Wer die ersten selbsterstellten Seiten hinter sich hat und sich nach und nach immer weiter wachsenden Webseiten gegenüber sieht wird schnell feststellen, dass Stylesheets sehr schnell eine durchaus schwer überschaubare Größe annehmen. Daher ist es wichtig, sich im Vorfeld ein paar Gedanken zur inhaltlichen Struktur und Organisation der Styles zu machen.

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.

Weiterführende Links

Kommentare

Simon Duss
am 23.12.2005 - 11:41

Eine Kleine Ergänzung von mir:
CSS Dateien werden bald überladen. Da ich gern alles durchstruktuierem, habe ich die einzelnen Style-Sheets ausgelagert mittels @import.
So besitzt mein aktuelles projekt ca. 8 CSS-Dateien. Sogar den Bereich des Contents habe ich aufgeteilt (algemein, formulare, floats).

Permanenter Link

Heiko
am 23.12.2005 - 11:51

Simons Anmerkung ist absolut empfehlenswert. So kann eine Datei alle default-Werte beinhalten und jede Rubrik besitzt seine eigenen spezifischen Styles, sofern nicht alle gleich sind. Nicht nur eine gute Gruppierung der Styles, verschafft mehr Überblick, sodnern auch eine optimale Verwendung von Shorthand-Properties, somit kann ebenfalls einiges eingespart werden. Klasse Artikel Knut!

Permanenter Link

Knut Karnapp (Autor)
am 23.12.2005 - 12:59

Die Diskussion, ob das mit rein soll hatten wir intern auch, nur haben wir uns dann entschieden es, aufgrund der Länge des Artikels, hier außen vor zu lassen. Ach und: danke Heiko !

Permanenter Link

Rico
am 23.12.2005 - 15:08

Mal angenommen, ich rufe eine Seite von Simon auf. Muss dann meine Internetverbindung alle 8 CSS-Dateien laden oder werden die serverseitig zusammengeführt?

Da gutes Strukturieren und Kommentieren ja einen Quelltext ziemlich aufblähen kann, würde mich noch interessieren, ob alle Browser einmal-aufgerufene CSS-Dateien im Speicher behalten oder ob diese bei jedem Seitenaufruf neu geladen werden.
In diesem Falle würden wir uns die eingesparten Ladezeiten - durch das Verwenden von Webstandards - mit Kommentaren und Strukturelementen wieder kaputt machen

Permanenter Link

SilentWarrior
am 23.12.2005 - 15:48

Guter Artikel! Allerdings hätte ich da noch eine Frage:

Wenn man jetzt z. B. /* Navigation in der CSS-Datei hat, dann kann man ja genausogut auch einfach nach "/* Nav" suchen, anstatt noch zusätzlich das Gleichheitszeichen einzubauen. Oder hat dieses irgendeinen Vorteil?

Permanenter Link

Jens Grochtdreis
am 23.12.2005 - 17:37

@Rico: CSS-Dateien werden genau wie Bilder und Flash-Dateien und die HTML-Seite selber auf Deinem Rechner im Cache gespeichert. Deshalb ist es für den Speicherplatz nachrangig, ob acht kleine oder eine große Datei geladen werden. Die Pflege der Seite kann so einfacher werden.
Ich verlinke mittlerweile immer eine CSS-Datei, in der ich dann mehrere CSS-Dateien importiere.

Permanenter Link

Knut Karnapp (Autor)
am 23.12.2005 - 20:41

@ silentwarrior

Das Problem dabei ist, dass wenn du einer ID oder Klasse auch den Wortteil "nav" mitgibt die Suchfunktion auch an diesen hängenbleibt. Das umgehst mit dem Gleichheitszeichen.

Permanenter Link

Benedikt Forchhammer
am 24.12.2005 - 12:14

@knut: ich denke SilentWarrior meinte, dass man nach "/* nav" suchen könnte (also mit dem slash und *).
und ich denke: ja, so kommt man auch ans ziel... Nur wird man in der suche denke ich leichter und schneller mal ein "=" eintippen als / und * UND leerzeichen ;-)

Ich mache es auch inzwischen so... 1 css je seite eingebunden, und in dieser dann via @import weitere styles importiert.
ich bin gerade an einer Seite, da hat jeder Bereich einen unterschiedliches Farbschema und teilweise zusätzliche elemente;
dementsprechend importiere ich auf manchen seiten weniger oder andere einzelstylesheets; so wird nicht alles auf einmal geladen, und erst dann auf der seite wo ichs benötige. :)

Permanenter Link

Edoardo
am 27.12.2005 - 00:06

Per @import wollte ich es lokal in WP auch machen, hat aber nicht funktioniert.

Wie genau sieht denn die Syntax dafür aus?
Ich hab' schon auf css4you nachgeschaut, ohne Erfolg (hab' schon was gefunden, aber das funktioniert auch nicht).

Permanenter Link

Mathias Brodala
am 27.12.2005 - 00:14

Anlaufstelle Nummer 1 hierfür ist meiner Meinung nach wie vor SELFHTML. (Siehe "Einbindung mittels @import")

Permanenter Link

Die Kommentare sind geschlossen.