HTML namen/id/class richtig und professionell benennen?

2 Antworten

Noeru
23.09.2020, 20:10

IDs. Und zwar eindeutige. Keine Zahlen oder automatisch generierte Attribute oder Attributwerte.

So viele Attribute, die etwas über den Status / den Zustand des Elements aussagen, wie möglich. Also zB über das Attribut @disabled oder @disabled=true oder @disabled=false. Von mir aus auch sowas wie @visibility= none; oder block;

Ich arbeite unter anderem in der Softwareautomatisierung mit Schwerpunkt auf Softwaretest, und sowas hilft immens.

Nachtrag: wenn ich morgen mein Testobjekt sehe und mir die Frage hier wieder einfällt, adde ich noch was dazu.
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Programm, HTML
24.09.2020, 03:01

Wie so oft, gibt es da viele unterschiedliche Ansichten und demzufolge sind auch unterschiedliche Konventionen / Styleguides entstanden.

Ein paar bekannte sind:

  • BEM
  • ITCSS
  • OOCSS
  • SMACSS

Hier werden sie etwas näher erklärt:

Ebenso könntest du dir die Stile von bekannten Entwicklern / Frameworks anschauen. Zum Beispiel:

Gerade bei Frameworks (daher der Tipp, einmal mit Bootstrap zu arbeiten) wirst du merken, dass diese versuchen, die Selektoren so generisch/flexibel und modular wie möglich zu halten. So gibt es

  • für die Umsetzung eines Gridrasters bspw. Selektoren wie col-1, col-2, row, ...
  • für Abstände Selektoren wie mt-1, mb-1
  • vordefinierte Objekte (warning, info, ...)

Abgesehen davon gibt es natürlich viele Artikel, die zumindest allgemeine Tipps und interessante Ansätze geben. Zwei möchte ich an dieser Stelle einmal verlinken:

Ich werde dir nun nicht sagen, nutze X, weil Y schlecht ist o.ä.. In erster Linie geht es darum, einen einheitlichen, gut lesbaren Stil zu finden, der dir möglichst die Wartung deines Projekts erleichtert. Das betrifft daher nicht nur die Benennnung der Selektoren, sondern auch ihre Anordnung (Beispiel: Die Selektoren werden nach erstem Vorkommen sortiert oder alphabetisch oder nach Typ: Umso spezifischer der Selektor ist, umso weiter hinten steht er in der Datei; oder ...).

Wenn ich mir dein Code-Beispiel anschaue, würde ich dir empfehlen:

  • dich nur für eine Sprache zu entscheiden
  • Selektoren kurz zu halten
  • zu bedenken, dass Klassenselektoren mehreren Elementen zugeordnet werden können

Wenn du öfter Selektoren wie Hauptseite-LoginFunction-Logincontent verwendest, wird dein CSS-Code sowie das HTML-Dokument schnell lang, was natürlich auch mehr Ladezeit bei deiner Webseite fordert. Da der Name bei dir derzeit wie eine Ortsangabe ist, dürftest du den Selektor strenggenommen nirgendwo anders mehr verwenden, selbst wenn seine definierten Styles auch für andere Elemente gelten könnten.

Ich persönlich bevorzuge an der Stelle englische Bezeichner, die das zu stylende Element als Objekt betrachten bzw. Aufschluss darüber geben, welches Modul da gerade entstehen soll. Die Wörter werden vollständig kleingeschrieben, Wortzusammensetzungen mit einem Bindestrich getrennt. Aber auch Selektoren, die Zustände beschreiben, finde ich gut.

Dazu Beispiele:

<div class="popup hidden"><!-- ... --></div>

<a class="button" href="#">Link to some page</a>

<form class="searchbox">
  <label for="searchfield">Search</label>
  <input id="searchfield" type="search">
  <button>Go</button>
</form>

Wenn du einmal im professionellen Bereich mit CSS arbeiten wirst, wirst du also auch eine gewisse Einarbeitungsphase benötigen. Im optimalen Fall hast du einen Ansprechpartner / Frontend-Entwickler, der dich einführt und mit dem Styleguide vertraut macht, der für das aktuelle Projekt / im Betrieb vorzugsweise genutzt wird. Andernfalls solltest du erst selbst einmal in den Dateien / bisherigen Projekten nachschauen, wie es bisher gehalten wurde (oder noch besser: nachfragen).

Und wie mach ich das am besten mit den "-" weil in css funktioniert das nicht immer oder es erkennt was anderes.

Grundsätzlich kannst du einen Bindestrich in den Namen ruhig verwenden. Zu deinem Problem müsstest du einmal ein konkretes Beispiel teilen (z.B. via JSFiddle). Spontan würde ich vermuten, dass es mit dem Text-Encoding zutun haben könnte. Achte darauf, deine Dateien in einem Format wie UTF-8 zu speichern.