Post Tagged with: "framework"

Struktur und Dokumentation von CSS-Dateien

4. Juni 2010 at 19:52

css datei

Als Webdesigner und -Entwickler stößt man häufig über die Problematik große CSS-Dateien ordentlich zu strukturieren und zu dokumentieren, ggf. diese sinnvoll auf mehrere Dateien aufzuteilen.

Ohne eine vernünftige Struktur und Dokumentation kommt spätestens bei der Anpassung das böse Erwachen.

Vor allem bei Projekten an denen mehrere Personen arbeiten ist eine sinnvolle Struktur & Dokumentation unerlässlich.

Dieser Artikel soll daher Möglichkeiten der Strukturierung und Dokumentation von CSS Dateien aufzeigen.

Struktur

Für die Strukturierung gibt es mehrere Vorgehensweise, ich selbst habe mich nach jahrelanger Entwicklung dazu entschieden im ersten Schritt die CSS-Datei wie folgt in folgende Bereich zu gliedern:

  • #header
    • #header_logo
    • #header_navigation
  • #banner
  • #main
    • #main_navigation
    • #main _content
    • #main _sidebar
  • #footer
    • #footer_navigation
    • #footer_notice

Dokumentation

Im zweiten Schritt erstelle ich zwei Stylesheet-Dateien, welche ich layout.css und content.css nenne. In der layout.css befinden sich alle Definitionen zur Positionierung der einzelnen Elemente. Die Datei content.css enthält alle Definitionen zum gestalten der einzelnen Elemente. Als nächstes lege ich die Grundstruktur der CSS Dateien fest. Dabei schreibe ich die einzelnen Bereiche, welche oben aufgeführt wurden, in die CSS Datei. Die CSS Datei sieht nun wie folgt aus:

/***************************************
Author : Daniel Briegert <info@fly2mars-media.de>
Date : 2010.06.04
File : css/content.css
***************************************/

/* GENERAL ****************************/
/* HEADER *****************************/
/* HEADER_LOGO ************************/
/* HEADER_NAVIGATION ******************/
/* BANNER *****************************/
/* MAIN *******************************/
 /* MAIN_CONTENT ***********************/
/* MAIN_NAVIGATION ********************/
/* MAIN _SIDEBAR **********************/
/* FOOTER *****************************/
/* FOOTER_NAVIGATION ******************/
/* FOOTER_NOTICE **********************/

Anschließend werden die einzelnen Bereiche mit den einzelnen Elementen vervollständigt.
Z.B.  für #main_content einen H1-Tag wird wie folgt definiert:

/* MAIN_CONTENT ************************/

#main_content h1 {
border-bottom: 1px solid;
color: blue;
font: 1.4m Verdana, arial;
}

Sinnvoll ist es die Definitionen innerhalb einer Sektion alphabetisch zu sortieren. Das Beispiel oben veranschaulicht diese Vorgehensweise.

Weitere Informationen

Fertige CSS Frameworks erleichtern die Erstellung. Interessant  ist unter anderem das Framework Blueprint CSS, welches ihr unter dem folgenden Link findet.

Link:

Read more 0