Grid-Layouts & Semantik: Ein Widerspruch?
von Dennis Erdmann
In den letzten Wochen bekamen wir gleich mehrere Mails zum Thema Grid-Layouts und Semantik. Anstoß waren die letzten beiden Artikel unseres CSS-Kurses für Contao, in denen wir das Contao-, sowie das Bootstrap Grid in Verbindung mit Contao vorstellten.
Bevor es also mit Teil 8 unserer Artikelserie weitergeht, machen wir einen kleinen Abstecher und widmen uns dem Thema Grids und Semantik.

Der Tenor dieser E-Mails war mehr oder weniger immer der Gleiche. Diese beiden Zitate bringen dabei die Gedanken vieler Webentwickler ganz gut auf den Punkt:
„Grid-Layouts stellen nicht die Semantik, sondern das Layout in den Vordergrund“
und
„Grid-Klassen sind nicht semantisch“
Das Thema wird immer wieder an verschiedene Stellen im Web diskutiert. Richtig erstaunt war ich aber, dass es sogar in der Dokumentation von Bootstrap zum Grid-Layout heißt:
„It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Wenn ich ein paar Jahre zurückdenke, würde ich euch Recht geben. Und damit denke ich vor allen Dingen an die Zeit vor HTML5. Damals haben wir dem Nutzer, Browsern, Suchmaschinen und anderen Bots mittels CSS-Klassen und beispielsweise Microformats Informationen über den Inhalt mitgeteilt. Wir hatten ja nichts und so waren CSS-Klassen ein guter Ansatz. Doch dann kam glücklicherweise HTML5.
Mit HTML5 haben wir als Entwickler neue Möglichkeiten an die Hand bekommen, um unseren Inhalten eine Semantik zu geben: mittels neuen Elementen (HEADER, FOOTER, NAV), dem role-Attribut (WAI ARIA) und Microdata nach schema.org.
Brauchen wir da wirklich noch CSS-Klassen? Welchen zusätzlichen Mehrwert könnten CSS-Klassen heute noch bieten?
Meiner Meinung nach sollten wir CSS-Klassen (wieder) als das nutzen, was sie sind – die Möglichkeit den Inhalt einer Website zu gestalten. Wo wir wieder beim ersten Teil unseres CSS-Kurses wären: CSS-Klassen benennen. Der große Vorteil von Grid-Klassen ist, dass es funktionelle Klassen sind. Sie lassen sich an nahezu beliebiger Stelle im Layout verwenden. Trotzdem würde ich nicht behaupten, dass sie nicht semantisch sind. Ihre Bedeutung: Dieser Container soll eine bestimmte Breite/Position innerhalb eines Grid-Layouts einnehmen. Das entspricht vielleicht nicht ihrer Bedeutung im HTML, aber dafür haben wir ja die neuen Elemente und Attribute.
Wenn ich also die Möglichkeit habe, auf leichtem Wege einem Block, Element oder Modul eine Grid-Klasse hinzuzufügen, dann mache ich das auch. Denn so kann ich den Aufwand und mein CSS klein halten. Wenn die Verwendung der Grid-Klassen allerdings bedeuten würde, dass ich größere Template-Anpassungen vornehmen müsste, dann setze ich lieber die in Bootstrap vorhandenen Mixins zur Erstellung von Grid-Layouts ein. Mit Semantik hat diese Entscheidung aber nichts zu tun.
Was denkt ihr? Sind Grid-Layouts semantisch? Oder habt ihr auch das Gefühl, dass Semantik (so wie wir sie kennen) und Grid-Layouts zwei verschiedene paar Schuhe sind? Eure Meinung könnt ihr gerne in die Kommentare oder per Mail schreiben.
Kommentare
Kommentar von David Hellmann |
Grid Klassen haben für mich nichts im HTML zu suchen. Auch ein Grund warum ich seh gegen Frameworks bin. Auch macht es das ganze nur komplizierter da Dokumente im HTML und CSS angepasst werden müssen. Wenn ich nur im CSS alles machen kann finde ich das deutlich Vorteilhafter und effektiver. Auch wenn das CSS vielleicht etwas größer wird, es arbeitet sich damit einfch leichter.
Antwort von Dennis Erdmann
Moin David,
vielen Dank für deinen Kommentar. Ich weiß, dass viele Designer & Entwickler so denken, deswegen habe ich es hier thematisiert. Ich habe mich auch zu Anfang damit schwer getan. Aber wenn man von den Grid-Klassen eines behaupten kann, dann dass sie modulbar und gut wiederzuverwenden sind. Ich habe es zu Anfang auch nicht geglaubt, aber die CSS-Anweisungen von Grid-Klassen wieder und wieder zu schreiben, führt zu einer wesentlich größeren CSS-Datei.
Deswegen setze ich CSS-Klassen, wenn es geht und ich dadurch nicht größere Template-Anpassungen vornehmen muss, auch ein.
Einen Kommentar schreiben