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…
»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_
22.05.2008, 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
08.06.2009, 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
08.06.2009, 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
08.06.2009, 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. ;)