Semantisch sinnvoller Code

• zwei aufeinanderfolgende Dinge gleicher Art (Menüpunkte, Aufzählungen, Inhaltsverzeichnisse) sind bereits eine Liste
• table-Element nur für tabellarische Daten verwenden. Beliebige Daten können mit CSS tabellarisch ausgerichtet werden.
• Formulare: <label>-Elemente verwenden, Formulareinheiten mittels <fieldset> gruppieren und Abschnitte mit <legend> beschriften.
• Klassennamen: klar verständliche Namen vergeben und auf Inhaltstyp referenzieren z.B. class="message error" statt class="red box"
• unnötige Verschachtelungen von div-Elementen sowie Wrapper-Elementen vermeiden – stattdessen html und body-Elemente stylen
• auf Elemente verzichten, die reine Verzierung enthalten – diese mittels CSS-Pseudoelemente ::before und ::after erzeugen und stylen

Strukturierter Quelltext

• nicht alle Zeilenumbrüche entfernen – Zeilen(nummern) sind ein wichtiger Indikator für Fehler-Berichte
• Umbrüche zwischen Hauptabschnitte des Dokuments notieren & Kommentarfunktion verwenden
• Code-Ausrichtung: konsequenter Einsatz von Leerzeichen oder Tabs zur Ausrichtung – nicht beides wahllos mischen
• Whitespace: HTML interpretiert dies als Leerraum zwischen Wörtern und stellt nur ein einziges Leerzeichen dar – ausgenommen <pre>

Syntax-Stil

• Wichtiger als die Art der Schreibweise ist die Konsistenz
• z.B. Selektoren untereinander notieren, Block-Klammer in neuer Zeile schreiben, Whitespace konsistent anwenden, Reihenfolge der Eigenschaften, …
• Einbinden von CSS-Dateien der Notation in style-Elementen vorziehen
• Shorthand-Schreibweise verwenden
• eine gute Syntax hilft, den Code schneller zu lesen

Bad Example

#eine-ID .eineKlasse:pseudoclass,#eine-ID .eineKlasse:pseudoclass { border:1px solid red;
margin:0;
  color: #fff; margin-left: 10px;background;#000 url(bild.png);
  display:block;margin-right:20px; 
}

Good Example

#eine-id .eine-klasse:pseudoclass, 
#eine-id .eine-klasse:pseudoclass { 
  border:1px solid red;
  margin:0;
  color:#fff; 
  margin-left:10px;
  background:#000 url(bild.png);
  display:block;
  margin-right:20px; 
}

Great Example

#eine-id .eine-klasse:pseudoclass, 
#eine-id .eine-klasse:pseudoclass { 
  display:block;
  margin:0 20px 0 10px;
  border:1px solid #f00;
  color:#fff; 
  background:#000 url(bild.png); 
}

Normalisierung

• Browser verwenden ihr eigenes Default-CSS – Defaultregeln können von Browser zu Browser abweichen
• Teile der Elemene können vorab normalisiert werden
• Bsp. bei Listen werden Innen- oder Außenabstände unterschiedlich gehandhabt
• Normalisierung steht vor allen anderen Regeln

Beispiel

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: …;
}

ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}
 
li {
  display: list-item; 
  margin-left: 2em;
}