CSS Coding Guidelines I

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.