CSS Coding Guidelines II

Thema:

Teil 1 wurde ja schon ausgiebig diskutiert, daraus habe ich schon einiges mitgenommen. Machen wir also fröhlich weiter mit meinen Ideen, wie man CSS am besten notiert…

»It’s not everything that bad…« © BBC

Kommentare

Mehrzeilige Kommentare, mit Einrückung et al. sind zu platzieren:

  • am Beginn jeder Datei
    • mit Angabe wozu und an welcher Stelle das Stylesheet benötigt wird, kurze Inhaltsangabe o.ä.
    • Abhängigkeiten
  • vor jedem Themenabschnitt

Codebespiel: mehrzeiliger Kommentar

/**
 * Hello World
 * Dies ist ein mehrzeiliger Kommentar
 */

In allen anderen Fällen ist der Zeilenkommentar zu nutzen

Codebespiel: einzeiliger Kommentar

/* Dies ist ein einzeiliger Kommentar */

Leerzeilen

Einzelne Regeln sind durch 1 Leerzeile voneinander zu trennen. Es sollten niemal mehr als 2 Leerzeilen aufeinander folgen.

Codebespiel: Leerzeilen

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

.black_note {
    background: #ff00ff;
    color: #000;
}

Anm.: Bitte den Code immer so leserlich wie möglich gestalten. Optimierung des CSS auf Größe wird in späteren Buildprozessen umgesetzt und ist vom Layout unabhängig.

Kurzschrift-Eigenschaften

Wo immer möglich und sinnvoll sollen die Deklarationen in Kurzschreibweise zusammengefasst werden.

Codebespiel: Kurzschreibweisen 1

.small {
    background: transparent url(img/border-bottom.gif) repeat-x bottom;
    border: 1px solid #000;
}

Trotzdem bitte flexibel bleiben und davon abweichen, wenn es sinnvoll ist:

Codebespiel: Kurzschreibweisen 2

a:link {
    background: transparent url(img/sprite.gif) no-repeat 0 0;
}

a:hover {
    background-position: 0 -16px;
}

Best practice

Bitte jede Deklaration immer mit einem Semikolon abschließen.

Namen

  • alle Namen in Kleinbuchstaben
  • zusammengesetzte Namen mit _ (underscore) verbinden
  • eher aber kurze Namen suchen, höchstens 1 Zusammensetzung
  • Update: Klassennamen verraten nicht das Aussehen eines Elementes. (via) D.h. Klassen heissen nicht “.grey-border” oder ähnliches.

Reservierte IDs: folgende IDs sind in der Regel für das HTML-Gerüst vergeben und sollen außerhalb dessen nicht benutzt werden:

  • #wrapper
  • #container
  • #header
  • #content
  • #sidebar
  • #footer

To be continued.

Noch keine Kommentare.

Kommentare geschlossen.