CSS-Hinweise

Einige Richtlinien, auf die ein Designer bei der Erstellung der CSS-Anweisungen achten sollte:

Allgemeines

Verschachtelungen und abhängige CSS-Anweisungen sollten nur in den statischen Bereichen der Templates verwendet werden.
<h1> bis <h6> sollten definiert und für den Gebrauch im eigentlichen Inhalt reserviert sein.
In den statischen Bereichen es Templates sollten alle CSS-Anweisungen über CSS-Klassen oder die TAG-IDs festgelegt werden.

Wiederholende Elemente

Wiederholende Elemente sind z.B. Menüpunkte und ähnliches.
Bereiche die sich vom HTML-Code ähnlich sind, und sich quasi nur durch den dargestellten Text unterscheiden.

CSS-Anweisungen sollten für solche Elemente identisch sein (keine unterschiedlichen Breiten, Höhen, usw.)

Im eigentlichen Inhalt

CSS-Anweisungen die für den eigentlichen Inhalt verwendet werden, sollten ohne Abhängigkeiten und Verschachtelungen auskommen.
Der eigentliche Inhaltsbereich sollte nicht noch weiter durch DIVs unterteilt werden.

Auf bestimmte Tags beschränken

So fern sich einige CSS-Klassen ausschließlich auf bestimmte Tag-Typen beziehen sollen, ist es ratsam, der Class-Definition diesen Tag mit einem Punkt voranzustellen.
So könnte man bei den Definitionen in der img.css beispielsweise auch img.roter_Rahmen verwenden um sicher zu stellen, dass diese Anweisung nur bei Bildern interpretiert wird.

Weitere Hinweise

Um eine bestmögliche Darstellung im WYSIWYG-Editor zu erzielen sollten Sie nach Möglichkeit darauf verzichten eigene CSS-Klassen zu verwenden.
Sinnvoller ist es die HTML-Tags selbst zu beschreiben. Über verschachtelte Definitionen können Sie die Klassen dabei auf den Inhaltsbereich und den Editor begrenzen.

Die folgende CSS-Definition würde z.B. auf alle <p>-Tags im Editor angewandt werden. Um im Frontend die gleiche Formatierung zu erreichen, muss der Inhaltsbereich in der Index.html dementsprechend von einem Bereich mit der ID inhalt eingeschlossen sein. (vgl. "Der BODY-Bereich" im Designhandbuch)

#inhalt p {

	font-family : Times New Roman;

  	font-style : normal;

  	font-size : 1.0em;

}