CSS Coding Guidelines I

Thema:
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.