Was macht einen semantischen Klassennamen aus?

Semantik in HTML ist immer ein heißes Thema. Manche streben sie ständig an. Manche Leute kritisieren eine dogmatische Einhaltung. Manche Leute wissen nicht, was zum Teufel das ist.

Ich würde Semantik in Bezug auf HTML als Tags, Klassen, IDs und Attribute beschreiben, die den von ihnen umschlossenen Inhalt beschreiben, aber nicht spezifizieren. Beginnen wir mit einem Beispiel, auf das wir uns wahrscheinlich alle einigen können.

Schlechte Semantik

<div class="article">
  <div class="article_title">Smurf Movie Kinda Sucks</div>
  <div class="the_content">Not surprisingly, this weeks release of
     <div class="darkbold">The Smurfs</div> kinda sucks.</div>
</div>

Gute Semantik

<article>
  <h1>Smurf Movie Kinda Sucks</h1>
  <p>Not surprisingly, this weeks release of
     <b>The Smurfs</b> kinda sucks.</p>
</article>

Ob Sie nun denken, dass HTML5 einsatzbereit ist oder nicht, ich denke, Sie würden zustimmen, dass, wenn Sie ein HTML-Element für einen Artikel benötigen, das Tag <article> besser ist als ein generisches <div> mit einem Klassennamen. Der Titel des Artikels wird zu einer Überschrift, der Inhalt zu einem Absatz, der fettgedruckte, aber nicht hervorgehobene Titel wird zu einem fettgedruckten Tag.

Aber nicht alles lässt sich so sauber auf HTML-Tags abbilden. Betrachten wir eine Reihe von Klassennamen und ich werde meine Meinung abgeben, ob ich denke, dass sie semantisch sind oder nicht.

<div class="column_1"></div>

Unsemantisch. Dies ist ein klassisches Beispiel. Jeder einzelne CSS-Grid-Framework der Welt verwendet irgendeine Art von Klassennamen, um die Grids zu deklarieren. Ob es „yui-b“, „grid-4“ oder „spanHalf“ ist, all diese nähern sich der Spezifikation als der Beschreibung ihres Inhalts. Obwohl ich behaupte, dass dies unsemantische Klassennamen sind, denke ich auch, dass sie in Layouts von Float-basierten Grid-Systemen größtenteils unvermeidlich sind.

<div class="footer"></div>

Semantisch. Obwohl ein Footer ein abstraktes Konzept ist, hat er im Webdesign eine Bedeutung erlangt. Es ist der untere Teil einer Website, der typischerweise Dinge wie wiederkehrende Navigation, Copyright, Autoreninformationen usw. enthält. Dieser Klassenname deklariert eine Gruppe für all diesen Kram, ohne ihn zu beschreiben.

Wenn Sie den Sprung zu HTML5 gemacht haben, wäre das <footer>-Element besser. Und das gilt für alle HTML5-Elemente. (Header sollten <header> sein, Sidebars sollten <aside> sein usw.) Wenn Sie HTML5 noch nicht verwenden (Sie sollten einen wirklich überzeugenden Grund haben), sind die entsprechenden Klassennamen meiner Meinung nach in Ordnung.

<div class="largeText"></div>

Unsemantisch. Das spezifiziert. Warum sollte der Text größer sein? Um sich von anderem kleineren Text abzuheben? „standOut“ oder „callout_text“ wären hier besser, da Sie im theoretischen Redesign-Zukunftsbild™ möglicherweise einen anderen Stil wählen möchten, um diesen Text hervorzuheben, der nichts mit der Größe des Textes zu tun hat, und Sie werden nicht mit einem umständlichen Klassennamen feststecken.

<div class="priority-2"></div>

Semantisch. Ich habe mit einigen Leuten von MailChimp (Jason Beaird und Aarron Walter) darüber gesprochen, und so deklarieren sie die relativen Wichtigkeitsstufen von Buttons innerhalb der App (obwohl mit Klassennamen eher wie „p1“ .. „p5“). Buttons mit höherer Priorität könnten hellere Farben haben oder größer sein, während Buttons mit niedrigerer Priorität stärker mit dem Inhalt verschmelzen könnten. Indem Sie nicht spezifisch sind, was diese Stile sind, und auf eine Prioritätsstufe abstrahieren, bleiben Sie semantisch. Es ist, als würde man die Idee von <h1>, <h2>, <h3> usw. auf Buttons übertragen.

<div class="copyright"></div>

Semantisch. Wenn doch nur jeder Klassename so einfach wäre! Das gilt für jeden Abschnitt, der Inhalte enthält, die sich leicht mit einem Wort beschreiben lassen, wie „tweets“, „pagination“ oder „admin-bar“. Obwohl bei letzterem Sie besser daran täten, ihn „admin-nav“ zu nennen, da im theoretischen Redesign-Zukunftsbild™ dieser Bereich möglicherweise keine „Bar“ mehr ist.

<p class="introp"></p>

Unsemantisch. Ich sah einmal eine Präsentation mit Dave Rupert, wo er scherzte, dass dies sein Lieblingsklassename sei. Ich kann das gut nachvollziehen, da es ein sehr häufiges Szenario ist, den ersten Absatz einer Seite anders zu gestalten, als aufmerksamkeitserregende Übersicht, um die Leute in einen Artikel zu bekommen.

Wenn Sie absolut eine supertiefe Browserunterstützung benötigen, benötigen Sie möglicherweise eine Art Klassennamen, bei denen ich sagen würde, dass „intro“ besser ist als „introp“ (lassen Sie den Elementnamen weg). Aber viel besser wäre es, einfach den ersten Absatz anzusprechen wie article p:first-of-type oder h1 + p.

<div class="clearfix"></div>

Unsemantisch. Dies ist ein äußerst häufiger Klassename, der eine kleine Trickserei anwendet, um das Element dazu zu bringen, all seine untergeordneten Floats zu enthalten, anstatt zusammenzufallen. Aber es hat nichts mit dem Inhalt zu tun, den er enthält, und ist daher unvermeidlich unsemantisch. Dan Cederholm empfiehlt stattdessen einen gefühlvolleren Klassennamen „group“ für diesen Zweck (in seinem Buch Handcrafted CSS), was meiner Meinung nach diesen gerade noch in den Bereich des Semantischen bringt, da dieser Wrapper sicherlich mehrere andere Elemente enthält und somit eine Gruppe ist (beschreiben, ohne zu spezifizieren).

<div class="left"></div>

Unsemantisch. Vielleicht möchten Sie im theoretischen Redesign-Zukunftsbild™ diese Dinge stattdessen auf der rechten Seite haben. Zu spezifisch.

<div class="success"></div>

Semantisch. Ich denke, dieser funktioniert am besten in Verbindung mit anderen Klassennamen, sodass einer von ihnen den Inhalt und einer den Status dieses Inhalts beschreibt. Wie „success message“, die eine Nachricht wie „Ihr Dateiupload war erfolgreich!“ enthalten könnte. Wenn die Nachricht lautet „Beim Upload Ihrer Datei ist ein Problem aufgetreten.“, könnten die Klassennamen stattdessen „fail message“ lauten und die entsprechende Formatierung haben.

<div class="plain-jane"></div>

Unsemantisch. Dies versucht zu spezifizieren, dass der Inhalt darin auf eine bestimmte Weise gestylt werden soll. „plain-jane“ ist dasselbe wie „normal“ oder „regular“. Idealerweise sollte CSS so geschrieben werden, dass Sie keine Klassennamen für „reguläre“ Stile benötigen, diese kommen einfach standardmäßig durch den Kaskadeneffekt, und alles, was davon in ungewöhnliche Weise abweicht, erhält eine Klasse.

<div class="entry-unrelated"></div>

Unsemantisch. Readability, die Web-App zum Umformatieren und Speichern von Webseiten zum späteren leichteren Lesen, verwendet diesen Klassennamen, um Teile von Elementen Ihrer Website zu spezifizieren, die Sie nicht versehentlich in die Konversation/Speicherung Ihres Artikels einbeziehen möchten. Der Grund, warum ich hier unsemantisch vorgehe, ist, dass er beschreibt, was er nicht ist, nicht was er ist. Ich wünschte, es gäbe etwas anderes als einen Klassennamen, das für diesen Zweck verwendet werden könnte. So etwas wie rel=nofollow für Links, aber für Inhalte.

<div class="hyphenate"></div>

Unsemantisch. Versucht, das Verhalten des Inhalts zu spezifizieren, anstatt zu beschreiben, was er tatsächlich ist.

<a class="link" href="#"></a>

Unsemantisch. Obwohl Link beschreibend ist, ohne spezifisch zu sein, macht die Natur eines Ankerlinks ihn bereits zu einem Link, daher nicht notwendig. Wenn der Klassename diesen Link von anderen „normalen“ Links trennen soll, beschreiben Sie genauer, warum, z. B. „book-link“ oder (diskutabel) „button“.

Aber…

Nehmen wir an, Sie haben zwei Arten von Artikeln auf Ihrer Website und möchten sie unterschiedlich gestalten. Filmkritiken haben einen blauen Hintergrund und aktuelle Nachrichten einen roten Hintergrund und größere Schrift.

Hier ist eine Möglichkeit, dies zu tun

<article class="movie-review">
   ...
</article>

<article class="breaking-news">
   ...
</article>

und eine andere

<article class="blueBg">
   ...
</article>

<article class="redBg bigText">
   ...
</article>

Ich wette, wenn wir eine Umfrage machen und Leute fragen, welches Beispiel sie für semantischer halten, würde das erste gewinnen. Es erfüllt die Kriterien dieses Artikels: beschreiben, ohne zu spezifizieren. Während das zweite Beispiel spezifiziert („blueBg“ ist ein Klassenname, der einen blauen Hintergrund anwendet). Nehmen wir an, das theoretische Redesign-Zukunftsbild™ hört auf, theoretisch zu sein und ist jetzt in Arbeit. Das Design für Filmkritiken hat jetzt einen grünen Hintergrund. Der Klassenname „blueBg“ ist dort ziemlich umständlich. Während der Klassenname „movie-review“ völlig in Ordnung ist und Sie einfach die Eigenschaften/Werte ändern, um den grünen Hintergrund stattdessen zu erzielen.

Das bedeutet nicht, dass das erste Beispiel immer besser ist. Nehmen wir an, diese hellblaue Farbe wird an vielen Stellen auf der Website verwendet. Vielleicht ist es die Hintergrundfarbe eines bestimmten Teils des Footers und einer bestimmten Sidebar-Box. Möglicherweise landen Sie bei Selektoren wie

.movie-review, 
footer > div:nth-of-type(2),
aside > div:nth-of-type(4) {
   background: #c2fbff;
}

Das ist effizient, weil Sie diese Farbe nur einmal deklarieren. Aber es ist auch ein ziemlich komplexer, schwer zu lesender, unhandlicher Selektor. Ganz zu schweigen davon, dass diese verschiedenen Selektoren eine einzigartige Formatierung benötigen könnten, so dass sie später wiederholt werden müssen. Oder Sie wählen einen anderen Ansatz und lassen sie einfach getrennt

.movie-review {
   background: #c2fbff;
   /* Plus other stuff */
}

footer > div:nth-of-type(2) {
   background: #c2fbff;
   /* Plus other stuff */
}

aside > div:nth-of-type(4) {
   background: #c2fbff;
   /* Plus other stuff */
}

Das könnte Ihre CSS-Datei tatsächlich organisierter halten (verschiedene Bereiche der Website in verschiedenen Abschnitten), aber auf Kosten repetitiver Deklarationen. In einer Präsentation von Nicole Sullivan, die ich kürzlich auf dem CSS Summit sah, wies sie auf einige große Unternehmen hin, die die exakt gleiche Farbe in den CSS-Dateien buchstäblich *tausende* Male deklarieren. Ich denke, wir können alle zustimmen, dass das verrückt ist. Es kann eine Vielzahl von Lösungen dafür geben, aber eine davon könnte die Verwendung eines Klassennamens wie „blueBg“ sein, um ihn einmal im CSS zu deklarieren und dann die HTML die Last der Anwendung dieses Klassennamens aufzuerlegen, wenn Sie dieses Design wünschen. Dennoch wären Sie besser dran, es „mainBrandColor“ oder „secondaryFont“ zu nennen, um Spezifikationen zu vermeiden. Soweit ich weiß, ist das OOCSS. Ein geringer Teil Semantik opfern für das größere Wohl (drastisch kleinere Ressourcen).

Ich würde gerne Ihre Meinungen dazu hören. Ich bin mir sicher, viele von Ihnen haben andere Beispiele, unterschiedliche Meinungen darüber, was semantisch ist oder nicht, und ob das wichtig ist oder nicht.