Den Inhalt eines Stylesheets richtig strukturieren
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Sie wollen wissen, wie Sie den Inhalt eines Stylesheets so strukturieren können, dass dieser möglichst leicht zu warten ist.
Lösung
Eine Strukturierung von CSS-Regeln kann erreicht werden, indem die verschiedenen visuellen Elemente einer Webseite zu Gruppen zusammengefasst werden. In der folgenden Liste finden Sie einen Vorschlag für eine mögliche Gruppierungsreihenfolge der Elemente in einem Stylesheet:
- HTML-Elemente (h1–h6, p, a, Listen, Links, Bilder)
- Typografie
- Seitenlayout (Kopfzeilen, Inhalt, Seiten-Navigation, globale Navigation, Subnavigation, Seitenleiste, Fußzeilen)
- Formulartags (form, fieldset, label, legend
- Inhalte (Eintrag, Ereignis, Nachrichten)
Hier sehen Sie die Kommentare aus einem Stylesheet, die den CSS-Code unterschiedlich gruppieren:
/* Typografie und Farben
------------------------------------ */
[CSS-Code]
/* Struktur
------------------------------------ */
[CSS-Code]
/* Kopfzeilen
------------------------------------ */
[CSS-Code]
/* Bilder/Grafiken
------------------------------------ */
[CSS-Code]
/* Listen
------------------------------------ */
[CSS-Code]
/* Formurlarelemente
------------------------------------ */
[CSS-Code]
/* Kommentare
------------------------------------ */
[CSS-Code]
/* Seitenleiste
------------------------------------ */
[CSS-Code]
/* Gemeinsame Elemente
------------------------------------ */
[CSS-Code]Diskussion
Was für eine Person gut ist, muss für eine andere nicht unbedingt hilfreich sein. Diese Aufstellung ist eine Empfehlung, die auf einer Kombination aus persönlicher Erfahrung und "besten Praktiken" basiert. Sie sollte für kleine bis mittlere Websites recht gut funktionieren.
Vermutlich haben Sie für verschiedene Projekte Ihre eigenen Vorlieben. Möglicherweise funktioniert eine andere Strukturierung für Ihre Situation besser. Besuchen Sie Ihre bevorzugten Websites und sehen Sie sich deren Stylesheets an, um weitere Möglichkeiten der Strukturierung kennenzulernen.
Siehe auch
- Den Artikel "CSS Organization Tip 1: Flags" von Doug Bowman für eine Methode, bestimmte Regeln in Ihren CSS-Dateien zu finden,
- das Rezept Stylesheet-Dateien organisieren zur Organisation von Stylesheet-Dateien und
- das Rezept Ein intelligentes System zur Verwaltung von CSS-Hacks zum Erstellen eines intelligenten Hacking-Systems.
| << 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