CSS Coding Guidelines II

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…

dr. who
»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.

4 Kommentare

ben_ am 22. Mai 2008 um 20:14 Uhr:

You smell that? Do you smell that? Prelaunch, son. Nothing else in the world smells like that. I love the smell of prelaunch in the morning. You know, one time we had a hill bombed, for twelve hours. When it was all over I walked up. We didn’t find one of ‘em, not one stinkin’ dink body. The smell, you know that gasoline smell, the whole hill. Smelled like … victory. Someday this war’s gonna end …
Oleg aka Kof am 8. Juni 2009 um 16:32 Uhr:

Gute Arbeit. Bin nur in einem Punkt nicht einverstanden. Die zusammengesetze Namen sollten nicht mit underscore getrennt werden sondern mit Bindestrich.

.black-note {
background: #ff00ff;
color: #000;
}

Das hat sich schon mittlerweile stark durchgesetzt und ist ähnlich der eigentlichen CSS Architektur.
Oleg aka Kof am 8. Juni 2009 um 16:37 Uhr:

Schön wäre auch noch zu definieren wann die Klassen und wann die Ids verwendet werden. Meiner meinung nach sollte man die ID’s gar nicht für css benutzen, sondern nur für javascript, so weisst man immer das auf das element mit javascript zugegriffen wird (zugriff über id ist wesentlich performanter) und man darf es nicht einfach so verändern. Ausserdem ids können nur 1 mal verwendet werden, deswegen sollte man sie sparsam verwenden.
Nico Brünjes am 8. Juni 2009 um 17:01 Uhr:

Hiho, nach langer Zeit mal wieder ein Beitrag dazu, danke schön.

Zur Frage ob Bindestrich/Minus oder besser underscore, da bin ich jetzt nicht so festgelegt, ich glaube Hauptsache ist, man entscheidet sich für eine von beiden Versionen.

Die Anmerkungen zu den IDs sind alle richtig und hier auch schon so in die tägliche Arbeit eingeflossen. Eins sei aber hinzugefügt: ID’s sind natürlich auch noch als Linksprungmarken wichtig.

Codecandies