Es gibt kein semantisches CSS
Es gibt seit einiger Zeit immer wieder Blog-Artikel, die sich mit der Qualität unserer Arbeit im Frontend auseinandersetzen. Sie thematisieren dabei den Aufbau unseres CSS, die Benamung von Klassen oder die Verwendung von IDs. Es sind meist interessante, bedenkenswerte Artikel. Häufig stolpere ich dabei in den Artikeln oder in den Kommentaren über die Wendung "semantisches CSS". Sorry Leute, das gibt es nicht! Semantik wird durch HTML-Elemente repräsentiert. Klassen existieren als HTML-Attribute, damit man zusätzliche Ansatzpunkte schafft, die man bspw. für die Gestaltung einer Webseite nutzen kann. Mikroformate nutzen Klassen als Vehikel, um Semantik zu transportieren. Das ist mehr oder minder ein Hack. Es ist eine erweiterte Nutzung der Klassen.
Klassen sind ganz bewusst Teile der Gestaltung, nicht der Semantik. Wir sprechen besser nicht mehr von semantischen, sondern von pflegbaren Klassen.
Es gibt keinen falschen Klassennamen
Die Benennung einer Klasse nach visuellen Kriterien ist nicht falsch, sie ist höchstens unpraktisch. Eine Klasse .rot steht in der Gefahr, dass sie im Laufe des Projektes oder in einem Folgeprojekt zum Transport von Blau oder Schwarz genutzt wird. Eine Klasse .warnung ist da besser. Diese Klasse gibt keine optischen Informationen, sie informiert über die inhaltliche Aufgabe des betreffenden Elements. Sie ist dadurch auch lesbarer als .hinweis1. Aber sie ist natürlich festgelegt durch ihre inhaltliche Bedeutung.
Doch machen wir uns nichts vor: eine vollkommen neutrale Auszeichnung zu Gestaltungszwecken ist zwar möglich, aber nicht notwendig. Wir verbinden doch schliesslich mit den Inhalten einen Sinn, oft auch eine Darstellungsform. Warum sollten wir diesen sich dann nicht auch in den Klassen widerspiegeln lassen?
Klassen werden von Menschen für Menschen geschrieben. Weder eine Suchmaschine, noch ein Browser, noch ein Screenreader haben einen Nutzen von der Verwendung von Klassen. Deshalb sollten Klassennamen von Entwicklern verstanden werden, damit sie sie problemlos nutzen können.
Durch die Idee der semantischen Klassen wird leider der Fokus von einer guten Struktur entfernt. Nicht mehr das semantische HTML erscheint wichtig, sondern die Klassennamen. Das sollte nicht geschehen. Eine gesunde, sinnvolle Struktur ist die Basis eines guten Frontends. Die verwendeten Klassennamen sind dabei nebensächlich, Hauptsache sie sind pflegbar.
- ← Previous
Dumme und intelligente Selektoren - Next →
Das geringere Übel