CSS Coding Guidelines I

the doctor
The Doctor. © BBC

Begriffsklärung

Codebespiel: Begrifflichkeiten

h2 { color: #000; }
  • Diese Codezeile ist eine CSS-Regel (rule)
  • h2 ist (hier) ein Selektor (selector)
  • color: #000; ist die Deklaration (declaration)
  • color ist eine Eigenschaft (property)
  • #000 ist ein Wert (value)

Nachzulesen beim W3C.

Schreibweisen

  • Alle IDs und Klassennamen klein schreiben
  • Alle Selektoren klein schreiben
  • Alle Deklarationen klein schreiben
  • Alle Werte klein schreiben

Codebespiel: Schreibweisen

h2, #container, .formbox { color: #efe; }

Leerzeichen (Space)

  • Zwischen Deklaration und Wert (nach dem Doppelpunkt)
  • nach Kommata
  • bei einzeligen Selektoren nach { und vor }
  • nach /* und vor */

Einrückung

  • Selektor auf eigener Zeile, dahinter {-Klammer
  • Deklarationen (1 pro Zeile) eingerückt um vier Leerzeichen
  • }-Klammer am Ende wieder ausgerückt

Codebespiel: Einrückung 1

.note {
    border: 1px solid #000;
    color: #ff0000;
    margin-bottom: 10px;
}

Ausnahme: Selektor mit nur 1 Deklaration wird einzeilig geschrieben

Codebespiel: Einrückung 2

.note { border: 1px solid #000; }

Regeln, die sich auf Kindelemente beziehen, werden an der Mutter-Regel ausgerichtet.

Codebespiel: Einrückung 3

.note {
    border: 1px solid #000; 
}
    .note p {
        padding: 4px 2px;
    }

To be continued. Update: Teil 2 ist fertig.

Veröffentlicht von

Nico

Nico Brünjes ist Digitalkreativer und Internethandwerker. Seit mehr als 15 Jahren erdenkt, baut und programmiert er moderne, standardkonforme und zugängliche Webseiten in HTML, CSS und Javascript.