CSS

Generell

Das CSS-Vokabular:

Selektor {
    Eigenschaft: Wert;
}

Eigenschaft und Wert ergeben zusammen die Deklaration.

Validierung

Das CSS ist valide.

Struktur

Grundsätzlich ist die Reihenfolge der Regeln im CSS aufgrund der Vererbung mit Bedacht zu wählen. Dabei soll die natürliche Wertigkeit (Spezifität) der Selektoren beachtet und genutzt werden. !important-Anweisungen sind möglichst nur für Debugging-Zwecke zu verwenden.

  1. Die CSS-Regeln sind modular, gemäss Reihenfolge in der HTML-Struktur gruppiert. Innerhalb der Gruppe gilt invertierte Spezifität: Erst die allgemeinen Regeln, dann die spezifischeren.
    Die modularen Blocks werden einheitlich mit einem Kommentar eingeleitet:
/* =footer
--------------------------------------------------------------- */
  1. Bei Layoutunabhängigen Elementen gilt das DOM und dann die invertierte Spezifität:
html, body, main, h1, h2, h2.warning, p, img, img > a, img a.lead {
    
}

Formatierung

  1. Jede Deklaration ist auf einer eigenen Zeile.
  2. Jede Deklaration ist eingerückt, die schliessende Klammer ebenfalls.
  3. Nach dem Selektor und zwischen Eigenschaft und Wert ist immer ein Leerzeichen.
  4. Jeder Deklaration – auch die Letzte – endet mit einem Semikolon.
  5. Vor einem modularen Block ist ein Kommentar, nach der letzten Regel des Blocks eine Leerzeilen einzufügen. Ergo: Kommentar Block > Regeln > Leerzeile > Kommentar nächster Block > ...
  6. Werte sind kleingeschreiben (#fff anstatt #FFF, arial anstatt Arial).
  7. Deklarationen und Werte sind wo möglich in der Kurznotation zu schreiben: #fff anstatt #ffffff

 Falsch:

p{
margin-bottom:0;
margin-top:2em; margin-right:0;
margin-left:1.5em;
color:#FFFFFF
}

 Richtig:

p {
    margin: 2em 0 0 1.5em;
    color: #fff;
}

Sortierung der Deklarationen

Deklarationen werden möglichst von aussen nach innen sortiert (Boxmodell). Erst das Verhalten der Box, dann deren Aussehen:

header {
    display, position, left, clear, width, height, float, ...
    margin, border, padding, ...
    font, color, background, ...
    transform, animation, box-shadow, ...
}

Hacks

Hacks sind zu vermeiden. Lässt sich ihr Gebrauch nicht gänzlich vermeiden, sind diese auf ein Minimum reduziert. Es sind Lösungen anzustreben, die in allen zu unterstützenden Browsern ohne Hacks gleichermassen funktionieren.

  1. Hacks werden kommentiert
  2. Unvermeidbare Hacks für ältere IE's (sofern diese noch zu unterstützen sind) sollten in einer eigenen CSS-Datei abgelegt, die mit CC’s (Conditional Comments) eingebunden wird. Diese wird nur den IE-Versionen ausgeliefert, die sie auch benötigen. IE ab Version 10 unterstützt keine CC’s mehr.

Sind Hacks/Filter oder browserspezifische Regeln unvermeidlich, sind diese wo nötig zu beschreiben:

header {
    zoom: 1; /* hasLayout for IE 6 */
}

Progressive Enhancement

Progressive Enhancement ist grundsätzlich zulässig, solange auch für andere unterstütze Browsern eine zugängliche Alternative geboten wird.

Beim Einsatz von neueren CSS-Eigenschaften ist eine möglichst abwärtskompatible Browserunterstützung zu berücksichtigen:
Beispiel:

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

Autoprefixer und CSS Feature Queries sind weitere Möglichkeiten.

Kommentare

Kommentare gliedern das CSS-Dokument in sinnvolle Blocks um die Übersicht zu vereinfachen. Der Name des Blocks ist dabei mit einem vorangestellten = zu versehen, um die schnelle Suche zu ermöglichen.

/* =header
--------------------------------------------------------------- */
header {
    position: relative;
    height: 5em;
}
header > h2 {
    position: absolute;
    top: 1em;
    right: 2.5em;
}

Kommentare hinter einzelnen Deklarationen geben Auskunft über Lösungswege (beispielsweise Grössenberechungen) oder weisen auf Hacks hin:

.mainnav__link--os a {
    color: var(--light-grey);
    font-weight: normal;
    border-radius: 0.222222222222222em; /* 4/18 */
}

externe Quellen

Dokumentationen

CSS

Sass