XHTML- und CSS Code Richtlinien.

  1. Programmierung und Technik
  2. GUI-Design
  3. Marketing
  4. Publikationen

XHTML und CSS-Code-Richtlinien

Richtlinien zur Code-Schreibweise sagen im Style-Guide über das Farbkonzept mit hexadezimalen und RGB-Farbwerten und der richtigen Positionierung des Logos hinaus auch etwas über die Code-Schreibweise aus. Gerade bei grossen Websites von Firmen machen Konventionen sehr viel Sinn.

Namensgebung

Namen sollten grundsätzlich so vergeben werden, dass sie möglichst die Funktion des betroffenen Elements wiedergeben – nicht seine Formatierung. Wenn man Klassen- und id-Namen mit einer sinnvollen Semantik versieht, können viele Probleme vermieden werden.

Falsch:
<p class="redLine" />
Richtig:
<p class="warning" />

Und wenn immer möglich Markup anwenden:

Falsch:
<span class="headline">Der Titel dieses Textes </span>
Richtig:
<h1>Der Titel dieses Textes</h1>

CSS-Selektoren im (X)HTML-Code

Über die Selektoren wird bestimmt, welche Regeln auf welche Elemente im Dokument wirken. Der Gebrauch von id's und Klassennamen sollte sehr überlegt erfolgen.

Das Skelett jedes Dokumentes ist dessen (X)HTML-Markup. Jede Webseite hat auch mit abgeschaltetem CSS immer noch eine bedeutungsvolle, logische Struktur. Die Headline ist mit <h1> formatiert, es folgen <p>-Texte und in richtiger Hierarchie weitere Unter- oder Zwischentitel von <h2> bis <h6>. Listen werden für Navigationselemente und für inhaltliche Aufzählungen verwendet.

Mit der visuellen Formatierung durch die CSS kommen zum generischen Code die Layout- und Darstellungs-Eigenschaften dazu. Auch hier sollen die Namen die Funktion wiedergeben. Für das Layout sind gute id-Bezeichnungen für die div-Boxen wichtig:

Falsch:
<div id="zwei">
Richtig:
<div id="header">

Bei schliessenden </div> Tags immer mit einem Kommentar kennzeichen, zu welchem öffnenden <div> sie gehören, das erleichtert die Lesbarkeit des (X)HTML-Codes stark und vermindert Fehler:

<div id="header">  
 	<h1> ... </h1>
  		...
 		...
 		... 
</div><!-- /header -->

Innerhalb der mit <div> eingegrenzten Bereiche kann nun gezielt das Markup angesprochen und dessen Darstellung gesteuert werden. So sparen wir viele Klassennamen und können zudem dieselben Elemente, etwa <h2> und <ul>, in anderen Bereichen der Webpage anders darstellen. Es gibt keinerlei Darstellungsangaben und nicht einmal Klassen und doch wird die Darstellung komplett mit CSS gesteuert: 

<div id="header">
  <h1>Ein Haupttitel erster Güte</h1>
  <h2>Hauptnavigation</h2>
    <ul>
      <li>Homepage</li>
      <li>Über uns</li>
      <li>Produkte</li>
    </ul>
/div><!-- /header -->
	...

Die CSS zur Steuerung der Darstellung des obenstehenden Codes

Mit dem CSS wird die Default-Darstellung der Tags übersteuert. Das heisst, die Eigenschaften der HTML-Tags die innerhalb des div mit der id="header", verwendet werden, werden mit den gewünschten Eigenschaften überschrieben:

/*----  header BOX fuer Navigation ----------*/
#header {
  background: #ccc;
  padding: 3px 0 5px 0;
  margin: 0;
  color: #fff;
  font: bold 1.2em arial, sans-serif;
}

/*---- Titel, und Links der Navigation ----------*/
#header h2, ul {
  display:inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
#header li {
  display:inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
#header a {
  color: #fff;
  text-decoration: none;
}
#header a:visited {
  color: #fff;
  text-decoration: none;
}
#header a:hover {
  color: #fff;
  text-decoration: none;
  background: #003a7;
}
...

Auch Klassen können definiert werden, die nur innerhalb des div #header wirken:

#header .aktiv {
  background: #003a70;
  padding: 3px 18px 5px 18px;
  margin: 0 0 0 0;
  color: #fff;
}

CSS Schreibweise generell

Ein kleines Beispiel zeigt gut lesbare Schreibweise auf, die unten Punkt für Punkt erklärt wird: 

/*---------- Layout Boxen -------------*/
/*---------- Header Bereich------------*/
#header {
  background-color: #fff;
  background-image: url(http://meinblog.com/logo.gif);
  height: 90px; /*definiert Abstand zum content */
  margin: 0;
  padding: 0 12px 20px 0;
  font: bold 1.2em arial, sans-serif;
}
  • Der Selektor (#header) ist ausgerückt, die schliessende spitze Klammer auch
  • Pro Deklaration eine Zeile
  • Jede Deklaration ist mit 1 Tabulator eingerückt
  • Jede Deklaration ist mit Semikolon abgeschlossen;
  • 1 Leerzeichen vor { und zwischen dem : und dem Wert. Für bessere Lesbarkeit
  • Wichtige Einstellungen sind mit Kommentar erläutert, /* definiert ...
  • Kurzschreibweise wenn immer möglich verwenden, für font: ... und auch für Farben: #fff, nicht: #ffffff
  • Kurzschreibweise auch bei padding und margin verwenden
  • Für IEX Mac brauchbare background-image url, also ohne Anführungszeichen schreiben, so wie oben und nicht: background-image: url("http://meinblog.com/logo.gif");

 

Zum Abschluss Validieren

Das (X)HTML-Dokument und das oder die CSS- Files validieren. Es werden grundsätzlich keine nicht-validen Files weitergegeben oder in einer Arbeitsgruppe auf den Share gespeichert. Das Datum der letzten Validierung im Head-Kommentar notieren.
HTML-Validator: http://validator.w3.org/
CSS-Validator: http://jigsaw.w3.org/css-validator/

 

Weiterführende Links

Das erwähnte Buch CSS Mastery, von Andy Budd:
CSS Mastery – Advanced Web Standards Solutions
Die Webdesign-Richtlinien für GMX Deutschland, von Jens Meiert ergänzen diesen Beitrag:
Richtlinien für GMX Deutschland von Jens Meiert
Umfangreiche Linkliste zu CSS:
http://www.drweb.de/weblog/weblog/?p=665
Hintergründe zum Quirksmode von IEX:
www.quirksmode.org/css/quirksmode.html
Fehler entdeckt?
Bitte melden an: Sven Jenzer, 19.09.2006