Bezeichnung von IDs und Klassen

Markus Schneider, 01.11.2006

HTML sollte insbesondere zwecks Abstraktion des Designs von Struktur und Inhalt so genannte Klassen enthalten. Die Klassen, für Websitebesucher unsichtbar, dienen der Klassierung von Elementen, Abschnitten, Bereichen etc.

Der Designer einer Website kann anschliessend mittels Stylesheets die Klassen selektieren und anderes formatieren. Klassen sind nur notwendig, wenn es sich auch um eine Klassierung zur Unterscheidung von Elementen, Abschnitten, Bereichen etc. handelt. Ein häufiger Fehler ist die Klassierung von allen Elementen eines Typs, was nichts bringt und dabei den HTML- und CSS-Code unnötig länger, komplizierter und schwerer verständlich macht. Man spricht dabei z.T. auch von "Classitis", vergleiche hierzu z.B.
http://www.bs-markup.de/blog/archiv/2005/06/30/dr-css/ .


Ein weiterer typischer Fehler ist die falsche Benennung der Klassen.
Beispiele von fehlerhaften Benennungen:

• "FooterBlue": Hier sind gleich zwei Fehler enthalten: Erstens sollte ein HTML-Dokument nur einen Footer enthalten (der verschiedene Unterbereiche enthalten kann). Der Footer sollte in diesem Fall eine ID zur Identifikation und keine Klasse enthalten. Die ID sollte in diesem Fall aber "Footer" oder ähnlich lauten. Für eine Klasse ist dies jedoch keine sinnvolle Bezeichnung.
  Zweitens und noch wichtiger als der erste Fehler ist die Verwendung der Bezeichnung "Blue". Hier wird statt abstrahiert, ganz konkret bereits festgelegt, welche Farbe ein Objekt haben soll. Bei einem Redesign oder auch nur einer kleinen Anpassung der Farben muss nun statt lediglich der CSS-Dateien auch die HTML-Ausgabe angepasst werden. Dies ist sehr viel aufwändiger und auch mühsam. Zudem verfügt unter Umständen der Designer gar nicht über die erforderlichen Berechtigungen oder Kenntnisse. Derartige Bezeichnungen gilt es in jedem Fall zu vermeiden.

• "Head": Head steht in diesem Beispiel für Überschrift. Überschriften haben in HTML jedoch bereits zugeordnete Tags, nämlich: h1-h6. Diese sollten in jedem Fall zwecks Zugänglichkeit, Suchmaschinenoptimierung, Übersichtlichkeit, Unabhängigkeit von Stylesheets etc. verwendet werden. Bei der Verwendung von h1-h6 ist eine zusätzliche Klassierung absolut unnötig und verwirrend. Gleichzeitig bläst sie den HTML-Code der Website unnötig auf.

• "XYClass": Es wird empfohlen die Bezeichnung "Class" nicht zu verwenden, da es sich durch die Position offensichtlich um eine Klasse handelt und nun der Name definiert werden soll.

Nachfolgend einige gute Beispiele für Klassennamen. Weitere lassen sich beim Einhalten der erwähnten Regeln einfach ableiten.

• "StartPage": Ermöglicht eine andere Formatierung auf der Startseite als auf Folgeseiten. Achtung: diese Klasse nicht auf allen Elementen definieren, sondern gleich am Anfang eines Dokuments und nur ein Mal.

• "Button": Knöpfe lassen sich insbesondere für Internet Explorer nicht separat von den meisten anderen Formularelementen selektieren. So lange dies so ist, schafft dieser "Trick" Abhilfe.

• "parent": Bei Listen für die Bezeichnung von Elternelementen.

• "selected": Bei Listen für die Bezeichnung von ausgewählten Elementen.

Die erwähnten Regeln die für Klassen gelten, gelten weitgehend auch für IDs.

Insbesondere wird empfohlen keine Farben in den ID-Namen zu verwenden!