Codecandies

Das Weblog von Nico Brünjes.

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:

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

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

To be continued.

0 Kommentare zu “CSS Coding Guidelines II”

    1. 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 …

    2. 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.

    3. 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.

    4. 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. 😉