Grid-Layouts & Semantik: Ein Widerspruch?

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.