Drucken
RSS Feed
KontaktStylesheet-Formatierung leicht gemacht
1So bleibt CSS übersichtlich
CSS bietet großartige Formatierungsmöglichkeiten für jede Webseite. Doch wer kümmert sich um eine ordentliche Formatierung von CSS? Schnell werden größere Stylesheets unübersichtlich und die Suche nach bestimmten Attributen endet in Frustration. Eine übersichtliche Darstellung von CSS ist daher gerade für größere Webprojekte Pflicht.
Ziel
Dieser kurze Artikel bietet keine Anleitung wie man CSS intelligent über mehrere Stylesheets verteilt und strukturiert, sondern bietet lediglich eine knappe Übersicht über mögliche optische Gestaltungsmöglichkeiten von einzelnen CSS-Klassen.
Der einzeilige Klassiker
Wer schnell mal einige Formatierungen in CSS entwirft, entscheidet sich oft für ein einzeiliges Darstellungsmuster. Allerdings wird es bereits nach 3 Attributen extrem unübersichtlich: Eine frustfreie Wartung ist im Nachhinein nahezu ausgeschlossen. Auch die Fehlersuche dürfte sich entsprechend schwierig und zeitraubend gestalten.
body {margin: 0 auto; padding: 0;font-family: "Lucida Grande", sans-serif;}
Permanenter Umbruch
Eine weitere Variante zur Formatierung von Stylesheets bietet bei weitem mehr Übersicht als der einzeilige Aufbau.
Hier wird strikt nach jedem Attribut mit zugehörigem Wert umgebrochen. Die abschließende sowie die einleitende, geschweifte Klammer wird ebenfalls in einer neuen Zeile notiert.
Vorteil der Methode: Einzelne Attribute werden schneller gefunden als in der einzeiligen Darstellungsvariante. Auch können Notationsfehler schnell erkannt werden. Als Nachteil kann man hier den hohen Platzverbrauch und die schlechte Unterscheidbarkeit von Selektoren und Attributen nennen.
body
{
margin: 0 auto;
padding: 0;
font-family: "Lucida Grande", sans-serif;
}
Umbruch mit Einrückungen
Eine Modifikation der oben genannten Methode zur Formatierung von CSS setzt zur besseren Unterscheidbarkeit von Attributen und Selektoren vor jedes Attribut mit dessen Wert noch eine zusätzliche Einrückung. Somit können die einzelnen Selektoren sehr schnell erkannt werden, und die zugehörigen Attribute sind optisch abgesetzt.
Durch die Einrückung kann die einleitende, geschweifte Klammer nun auch hinter den Selektor gesetzt werden, da sie zur Abhebung von Attribut und Selektor nicht mehr benötigt wird.
body {
margin: 0 auto;
padding: 0;
font-family: "Lucida Grande", sans-serif;
}
Diese Notationsvariante dürfte wohl zu den beliebtesten gehören, da sie meines Erachtens die höchste Übersichtlichkeit bietet.
Durch zusätzliche Leerzeilen nach zusammengehörigen Attributen und die Gruppierung selbiger lässt sich die Übersichtlichkeit nochmal deutlich verbessern.
body {
margin: 0 auto;
padding: 0;
font-family: "Lucida Grande", sans-serif;
font-size: 1em;
font-weight: bold;
border-color: #FEFEFE;
border-size: 3px;
}
Du kennst weitere insteressante Möglichkeiten um Stylesheets übersichtlicher zu gestalten? Dann nutz die Kommentarfunktion und ich werde den Artikel erweitern!
Dieser Artikel wurde verfasst von Martin Reithmayer.
Der Artikel ist am 04.08.2008 um 20:06 Uhr veröffentlicht worden und
wurde bislang 1 mal kommentiert.
Tags: CSS
Kommentar verfassen
Schon seit vielen Jahren beschäftige ich mich aktiv mit Webgestaltung und der Arbeit unter Linux. Dieser Blog dient mir als
Sprachrohr, meine Erfahrungen und Eindrücke aus verschiedensten Bereichen rund um den Computer an interessierte Anwender weiterzugeben.
Felix am 18.07.2008 um 19:59 Uhr
Ich benutze einen Mix aus deiner 1. und letzten Variante.
Wenn ein Selektor nur ein Attribut hat, kommt alles in eine Zeile, sobald es 2 oder mehr sind wird umgebrochen. Außerdem rücke ich die Selektoren ein:
#hauptcontainer { ... }
#hauptcontainer #untercontainer { ... }
Wo ist der RSS-Feed? Sonst würde ich vielleicht häufiger mal vorbeigucken.
Haunse!