Stylesheet-Dateien organisieren

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen Ihre Stylesheet-Dateien möglichst effektiv verwalten und organisieren.

Lösung

Verwalten Sie Ihre Stylesheet-Dateien, indem Sie sie in einem eigenen Verzeichnis ablegen. Die folgenden Dateien wurden beispielsweise in einem Verzeichnis mit dem Namen css gespeichert, das seinerseits im Ordner assets abgelegt wurde.

/_assets/css/print.css
/_assets/css/screen.css

Bei großen und/oder komplexen Websites kann es sinnvoll sein, die CSS-Regeln nicht nach Medientyp (print, screen etc.), sondern entsprechend ihrer Verwendung in eigenen Dateien zu speichern. Diese befinden sich in unserem Beispiel im gleichen Verzeichnis wie die einfache Version.

/_assets/css/layout.css
/_assets/css/color-imagery.css
/_assets/css/type.css

In der HTML-Datei können Sie die einzelnen Dateien im head-Element wieder einbinden:

<link rel="stylesheet" type="text/css" media="print" href="/_assets/css/print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/_assets/css/screen.css" />

Bei großen Sites enthält die Datei screen.css möglicherweise Methoden für den Import weiterer CSS-Dateien, die bestimmte Details der Bildschirmdarstellung festlegen. Hier ein Beispiel für den Anfang von screen.css:

/* weitere Stylesheets importieren */
@import url("/_assets/css/layout.css");
@import url("farbdefinitionen.css");
@import url("typ.css");

Diskussion

Für kleine bis mittlere Sites funktioniert das Auslagern von externen Stylesheets (siehe das Rezept Dokumententypen und ihre Auswirkungen auf die Browserdarstellung) für bestimmte Medientypen (print, screen etc.) recht gut.

Bei größeren oder komplexeren Sites kann es bei diesem Ansatz allerdings schwierig werden, die Dateien zu durchsuchen, um herauszufinden, wie die CSS-Anweisungen strukturiert sind.

Momentan gibt es noch keinen Standard oder eine Empfehlung für die Verwaltung von CSS-Dateien. Wie beim vorigen Rezept stellen Sie möglicherweise fest, dass ein anderer Ansatz für Sie besser funktioniert. Vermutlich müssen Sie mit der Organisation von Dateien und Inhalten ein wenig herumprobieren, bis Sie für sich die passende Lösung gefunden haben.

Siehe auch

Rezept Eine Webseite mit Stildefinitionen versehen für weitere Informationen zu externen Stylesheets.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln