6.5.2 Strukturierter Aufbau einer CSS-Datei

Während eine HTML-Datei in einer vorgegebenen hierarchischen Struktur aufzubauen ist (z. B. <html>, <head>, <body>), gibt es für CSS-Dateien keine zwingende Struktur. Es existieren jedoch einige "Best Practices":

  • Generelle Style-Anweisungen: Zuerst sollen alle generellen Style-Anweisungen erfolgen, die auf die gesamte Seite wirken.
  • Styles gemäß Aufbau der HTML-Seite: Die weiteren Style-Anweisungen sollten gemäß dem Aufbau der HTML-Seite erfolgen. Wenn im HTML-Dokument ein <header>-Element, gefolgt von <nav>-Elementen steht, sollte diese Reihenfolge auch in der CSS-Datei verwendet werden.
  • Kommentare: Alle Bereiche sollten eindeutig durch Kommentare getrennt werden, sodass man einen schnellen Überblick erhält.
  • Spezifizität: Die Reihenfolge innerhalb der einzelnen Bereiche sollte möglichst nach der Spezifizität erfolgen.

Beispiel: CSS-Datei für einen einfachen Internetauftritt

Im Folgenden wird die CSS-Datei des einfachen Internetauftritts www.thomaschewski.de (Stand 2017) gezeigt. Die Komplexität ist bereits beeindruckend (HTML ist dagegen relativ einfach), doch die Abschnitte lassen sich mit etwas Mühe gut verstehen. Auch diese Datei beginnt mit den zuvor genannten Dateien reset.css und normalize.css.

Insgesamt umfasst die Datei 2000 Zeilen, und sie wurde hier zur Ansicht entsprechend gekürzt.

CSS-Code

/* http://meyerweb.com/eric/tools/css/reset/ * v2.0 | 20110126 
* License: none (public domain) */ 

... VOM AUTOR GEKÜRZT ...

/*! normalize.css v7.0.0 | MIT License | 
github.com/necolas/normalize.css */ 
/* Document * 
====================================================================== */ 
/** 
* 1. Correct the line height in all browsers. 
* 2. Prevent adjustments of font size after orientation 
changes in * IE on Windows Phone and in iOS. */ 
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Sections *
====================================================================== */ 
body {
  margin: 0;
}

article, aside, footer, header, nav, section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content * 
===================================================================== */ 

html body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
}

html body .page-content {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
}

Der vollständige Quellcode ist hier als ZIP-Download verfügbar.


Was kann man daraus lernen?

  • Einer strukturierter Aufbau ist wichtig.
  • Möglichst noch mehr kommentieren als im gezeigten Beispiel, damit der Aufbau noch leichter verständlich wird.
  • CSS-Anweisungen "kämpfen" mit den verschiedenen Browserversionen und Auflösungen.
  • Zur Erstellung und zum Debugging von CSS-Dateien benötigt man Tools. Eine Erstellung rein im Editor ist "Wahnsinn".
  • Man muss aber trotz der Tools in der Lage sein einen Fehler in der CSS-Datei zu finden, sich also in der CSS-Datei auskennen.
  • Anforderungen an CSS ändern sich ständig (z. B. aufgrund von neuen Geräten und damit verbundenen Auflösungen).
  • Für die Erstellung von Internetanwendungen geht es kaum darum, ob jemand HTML kann. CSS- und JavaScript-Kenntnisse sind die wichtigen Faktoren. HTML ist dagegen "trivial".
  • CSS und JavaScript "lernt man nicht nebenbei", es ist ein Job in dem man Erfahrung benötigt und entsprechend "Profis" beschäftigen muss.
  • Frontend-Entwicklung sollte mit dem gleichen Aufwand wie Software-Entwicklung in anderen Bereichen geplant werden (Build-, Test-, Release-Tools).