Jens Meiert 15. September 2008

Empfehlungen für gute ID- und Klassennamen

Kein Beitragsbild

ID– und Klassennamen haben nicht unwesentlichen Einfluss auf die Wartbarkeit von HTML-Dokumenten und entsprechend wichtig ist es, geeignete Namen zu gebrauchen. Zusammenfassend gilt, IDs und Klassen, wenn möglich, zu vermeiden, ansonsten funktionale, im Zweifelsfall generische Namen einzusetzen und dabei auf »verständliche Knappheit« zu achten.

Im folgenden nehmen wir uns den IDs und Klassen in ihrer Funktion als Stylesheet-Selektoren an. Gemäß HTML-Spezifikation haben diese mehrere Rollen. So können IDs beispiels- und bekanntlicherweise auch als Link-Ziel sowie als Elementreferenz beim Scripting dienen.

Grundregeln für gute ID– und Klassennamen

Die Problematik ist alt, die in priorisierter Reihenfolge gegebenen Empfehlungen immer noch jung:

  1. Beschränken Sie den Einsatz von IDs und Klassen auf ein Minimum.
    Diese Vorgehensweise ist am einfachsten zu merken und anzuwenden. Sie stellt das geringste Wartbarkeitsproblem dar. Inhaltliche und funktionale Änderungen, die immer vorkommen können und gegen die man sich nicht schützen kann, muss und sollte, dürfen nicht mit rein optischen Änderungen verwechselt werden.
  2. Verwenden Sie funktionsbezogene ID– und Klassennamen.
    Es ist für gewöhnlich die nächstbeste Wahl, Namen von der Funktion abzuleiten, wie beispielsweise nav, warnung, oder fehler. Solche Namen haben nicht nur einen strukturellen Bezug, sondern können auch einem konzeptionellem Verständnis und der Zusammenarbeit helfen. Funktionsverwandte Namen helfen der Wartbarkeit und es bleibt im Hinterkopf, dass, sollte das jeweilige Element einmal seine Bedeutung ändern,
    substantiellere Änderungen wie neue Inhalte erforderlich sind.
  3. Verwenden Sie neutrale ID– und Klassennamen.
    Wenn Sie keinen vernünftigen funktionellen Namen bestimmen können oder Sie eine ausschließlich darstellungsbezogene ID oder Klasse einführen (wie bei alternierenden Tabellenzeilen), empfiehlt es
    sich, neutrale, generische Namen zu wählen. Beispiel sind alt, »alternativ«/»Alternative« oder aux. Diese Option ist hinsichtlich Verständnis und Kollaboration nicht unbedingt die beste, aber eben auch kein Wartungsproblem.
  4. Allgemein: Bevorzugen Sie Namen, die so kurz wie möglich,
    aber so lang wie nötig sind.
    Versuchen Sie, auf den Punkt zu kommen (nav), aber opfern Sie nicht unbedingt Verständlichkeit (kontakt).

Das wirklich unempfehlenswerteste, was man machen kann, ist, präsentationsbezogene Namen zu verwenden, wie die unseligen rechts, lila, 1024 et cetera. Solche Namen sind um jeden Preis zu vermeiden, da sie letztlich alle Vorteile von CSS rauben, und Sie bei Darstellungsänderungen also gezwungen wären, das HTML zu ändern.

Noch bessere ID– und Klassennamen

Es sind im Zusammenhang mit ID– und Klassennamen mindestens zwei »Boni« zu nennen, die in bestimmten Situationen wertvoll sind, zum einen »Pseudo-Namensräume« und zum anderen »Chamäleonsemantik«:

  1. »Pseudo-Namensräume« sind Präfices vor IDs und Klassen, die primär dazu beitragen können, Code in unbekannter Umgebung zu »schützen« (à la produktname-*). Auch wenn diese Pseudo-Namensräume dem konzeptionellem Verständnis dienen können, ist die Idee dahinter, die Wahrscheinlichkeit von unerwünschten Nebeneffekten zu minimieren (wenn der gewünschte Name bereits vergeben sein könnte oder mehr als einmal vergeben werden soll) und dadurch mehr Freiheit zu gewährleisten. Das Thema verdient insgesamt jedoch separate Behandlung.
  2. »Chamäleonsemantik« bezieht sich auf Namen, die ihre Bedeutung ändern können, wie zum Beispiel spalte-1 und spalte-2. Üblicherweise findet man sie auf mehrspaltigen Seiten vor, und dort in der Bedeutung von »Spalte 1« und »Spalte 2«, weswegen man einen Präsentationsbezug wittern mag. Eine mögliche Layout-Änderung auf ein einspaltiges Design muss aber dennoch keine HTML-Änderung bedeuten und zwar dank besagten Chamäleoneffekts: spalte-1 und spalte-2 könnten durchaus als »Spalte, Teil 1« und »Spalte, Teil 2« verstanden werden.

Jens Meiert

Jens O. Meiert, Webentwickler und Informationsdesigner (Google, W3C) und Autor (O’Reilly), ist spezialisiert auf professionelles Webdesign, Webentwicklung, Barrierefreiheit und Usability.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

7 Kommentare

  1. Ich denke mal ohne eine gewisse Struktur verliert man grade bei großen Seiten den Überblick. So sollte man dieses Thema auf jeden Fall bei allen Seiten in betracht ziehen. Ich persönlich empfehle da eine Art Wörterbuch anzulegen und immer dieselben ID- und Klassennamen zu verwenden, damit man auch seine alten Seiten versteht.

    MfG
    Gordian

  2. Sehr wichtig für kleineren Wartungsaufwand sind auch spracheinheitliche Bezeichnungen. .page und .seite gehöhren einfach nicht in ein nd dasselbe Dokument!

    LG
    Dominik

  3. Irgendwie ein Thema, das man (v.a. als Designer) gerne mal außen vor lässt und dann bei der fertigen Seite vor einem undurchdringlichen CSS-Wulst steht. Für alle Aussenstehenden unmöglich zu interpretieren. Werd ich mal als Anlass sehen, die Wartbarkeit in Zukunft ansatzweise zu beachten ;-)

  4. Irrgendwie fehlt mir das Stichwort Namenskonventionen, sowie die Vorteile davon.

    Als weiteren Lesestoff dazu kann ich wärmstens, das Buch Transcending CSS empfehlen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück