CSS Coding Guidelines II
Nico Brünjes am
in: css, development
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.
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 …