Standardisierung von Klassen- und ID-Namen unter CSS

Eine wirklich strukturelle Bezeichnung bedeutet, die Angaben zu Darstellung und Position vollständig vom Inhalt zu trennen – dazu gehören auch die Klassen- und ID-Namen, die in der Bezeichnung auftreten.

Das Ziel besteht darin, dass alle Bezeichnungen Informationen über die Struktur des Dokuments und nicht über dessen Erscheinung vermitteln sollen. Dies erleichtert die Wiederverwendung der Inhalte und Bezeichnungen in anderen Präsentationsformaten durch einfache Änderung des CSS. Es liegt auf der Hand, dass auf die Position in einer Seite bezogene Klassen- und ID-Namen für Präsentationsformate wie Audio ungeeignet sind. Daher benennt man die Klassen und IDs bei der strukturellen Bezeichnung nach ihrer Funktion innerhalb des Dokuments und nicht nach ihrer Position.

Mit einem strukturellen Ansatz bei der Bezeichnung gelangt man zu Klassen- und ID-Namen wie den folgenden:

• Markenangabe (branding)
• Haupt_Nav (main-nav)
• Unter_Nav (subnav)
• Hauptinhalt (main-content)
• Seitenleiste (sidebar)

Diese Namen sind ebenso anschaulich wie die darstellungsbezogenen Namen, doch sie beschreiben, was das Seitenelement macht, statt nur seine Position anzugeben. Das Ergebnis ist ein Code, der dem Ziel einer rein strukturellen Bezeichnung weit näher kommt. Dieser kann von Designern für unterschiedliche Präsentationsmedien formatiert werden, ohne dass die Bezeichnungen geändert werden müssen.

Selbst wenn man nicht plant, seine Website für die Präsentation in anderen Medien zu formatieren, kann eine strukturelle Namensgebung dazu beitragen, zukünftige Aktualisierungen und Überarbeitungen zu erleichtern. So vermeidet eine strukturelle Bezeichnung zum Beispiel die Verwirrung die entsteht, wenn ein div mit dem ID Rechte_Spalte an den linken Rand der Website gerückt wird. Viel treffender ist es das div Seitenleiste zu nennen, da diese Bezeichnung unabhängig von der Position immer zutrifft.

Neue Konventionen

Andy Clarke hat sich den Code von 40 Websites angesehen, deren Autoren als Verfechter eines normierten Web-Designs gelten. Obwohl die Namen der Klassen und IDs keineswegs einheitlich waren, tauchten einige Gemeinsamkeiten wiederholt auf. Hier ein Auszug der häufigsten gemeinsamen Klassen- und ID-Namen:

• Header (header)
• Inhalt (content)
• Nav (nav)
• Seitenleiste (sidebar)
• Footer (footer)

Eine vollständige Liste findet sich in dieser Tabelle mit den am weitesten verbreiteten Benennungskonventionen.