Webentwickler (also Sie) können CSS-Klassen und ID-Namen erstellen und diese Namen verwenden, um Divs und andere Seitenelemente und Tags zu identifizieren. Entwickler müssen bei der Benennung von CSS-Selektoren, die XHTML-Tags (Tags) neu definieren, sicherstellen, dass sie genau mit den vordefinierten Tags übereinstimmen. Bei Klassen- und ID-Selektornamen ist dies jedoch Ansichtssache. Allerdings ist es keine gute Angewohnheit, diese Klassen und IDs nach Belieben zu benennen.
Nachdem ich eine Reihe von Artikeln über CSS-Klassen und ID-Namenskonventionen von Andy Clarke (von Stuff and Nonsense und All That Malarkey) und Eric Meyer gelesen hatte, begann ich über die Verwendung von Klassen und IDs in meinem eigenen Website-Designprozess nachzudenken. Benennungsmethode.
Intuitive Benennung
Wenn Sie eine Webseite entwerfen und ein Div identifizieren müssen, besteht die natürlichste Idee darin, das Element mit Wörtern zu benennen, die seine Position auf der Seite beschreiben. Bei diesem Ansatz sehen die Klassen- und ID-Namen wie folgt aus:
Oberseite
horizontal-nav
linke Seite
Mittelsäule
rechte Spalte
Dies sind gültige Methoden zur Benennung von CSS- und XHTML-Klassen und -IDs. Diese Begriffe sind einfach und beschreibend und erfüllen somit die Notwendigkeit, Seitenelemente und ihre entsprechenden CSS-Stile zu identifizieren.
Das Problem besteht darin, dass ein solcher Name mit einem bestimmten Ausdruck des Seiteninhalts verknüpft ist. Diese Namen beziehen sich auf die Position von Seitenelementen innerhalb eines bestimmten Seitenlayouts, sodass ihre Verwendung außerhalb eines solchen Layouts unangemessen oder sogar verwirrend wäre. Gleichzeitig haben diese Namen keinen Einfluss auf die Struktur des Dokumentinhalts. Daher finden Sie hier eine bessere Möglichkeit, CSS-Klassen und IDs zu benennen.
Strukturierte Benennung
Strukturiertes Markup bedeutet eine vollständige Trennung der Ausdrucks-/Ortsinformationen vom Inhalt – dazu gehören auch Klassen- und ID-Namen, die im Markup erscheinen.
Mit Tags versehene zugehörige Informationen werden verwendet, um die Struktur des Dokuments und nicht sein Erscheinungsbild zu beschreiben. Mit dieser Funktion können wir Inhalte und Markups in verschiedenen Darstellungsformaten wiederverwenden, indem wir einfach CSS ändern. Wenn Sie diese Methode verstehen, werden Sie leicht feststellen, dass die Verwendung der Seitenposition zur Benennung von Klassen und IDs beim Umgang mit Darstellungsformaten wie Audio sehr unangemessen ist. Daher sollten Klassen und IDs nach ihrem Zweck im Dokument strukturiert und benannt werden und nicht nach ihrem Erscheinen.
Klassen und ID-Namen können wie folgt strukturiert benannt werden:
Branding
Hauptnav
Subnav
Hauptinhalt
Seitenleiste
Diese Namen sind ebenso leicht zu verstehen wie die intuitiven Namenskonventionen, beschreiben jedoch eher die Rolle des Seitenelements als dessen Position. Dadurch entspricht der Code besser der ursprünglichen Absicht, rein strukturelles Markup zu verwenden, d. h. Entwickler können Anzeigeformate in verschiedenen Medien verarbeiten, ohne das Markup zu ändern.
Auch wenn Sie nicht vorhaben, Ihre Webseiten in anderen Medien zu formatieren, kann Ihnen die Verwendung einer strukturierten Benennung dabei helfen, zukünftige Website-Upgrades oder Neugestaltungen einfacher zu gestalten. Beispielsweise vermeidet die strukturierte Benennung Verwirrung, wenn ein Div mit derselben ID in der rechten Spalte auf die linke Seite der Seite verschoben wird. Die div-Seitenleiste auf diese Weise zu benennen, ist angemessener, da der Name unabhängig davon, auf welcher Seite der Seite sie angezeigt wird, immer noch intuitiv und für Entwickler leicht verständlich ist.
einige Namenskonventionen
Andy Clarke analysierte den Quellcode von 40 Websites, die von Entwicklern entworfen wurden, die standardisierte Webdesign-Konzepte befürworteten. Obwohl die Klassen- und ID-Namen sehr inkonsistent sind, werden dennoch einige gebräuchliche Namen gefunden, die häufig vorkommen. Eine Beispielliste der am häufigsten verwendeten Klassen-/ID-Namen finden Sie hier:
Kopfzeile
Inhalt
Navigation
Seitenleiste
Fußzeile
Markieren diese gemeinsamen Klassen- und ID-Namen die Geburt eines Standards oder die Bildung einer allgemein anerkannten Konvention? Obwohl ich das erhoffe, glaube ich nicht. Ich würde mir wirklich eine Reihe von Benennungsstandards für gängige Seitenelemente wünschen, die wir jeden Tag sehen. Gleichzeitig kann die Verwendung einer standardisierten Benennungsmethode das Auffinden von Seitenelementen und das Aktualisieren der Website erleichtern, insbesondere wenn Sie die Arbeit zwischen Websites wechseln müssen, die von verschiedenen Entwicklern zu unterschiedlichen Zeiten entwickelt wurden.