Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

An klassenbasierten Rastern wird häufig kritisiert, dass das HTML-Markup durch eben jene Klassen unnötig aufgebläht wird. In einem sog. »semantischen Raster (semantic Grid)« kann auf diese Klassen verzichtet werden, da im Stylesheet die gewünschte Spaltenbreite einem Selektor direkt zugewiesen wird. Grundsätzlich ist diese Vorgehensweise auch mit reinem CSS denkbar, doch ohne den Einsatz eines Präprozessors wie Sass ist der Aufwand bei der Erstellung und der Pflege des Dokuments viel zu hoch. In diesem Beitrag möchte ich die elementare Funktionsweise von semantischen Rastern auf Basis von Sass beschreiben.

Semantische Raster vs. klassenbasierte Raster

In einem klassenbasierten Raster werden im CSS-Dokument Klassen-Selektoren definiert, die die Breite von Spalten festlegen. Im HTML-Code werden diese Klassen dann dem gewünschten Element hinzugefügt. Das sieht i.d.R. etwa so aus:

.columns { float:left; padding: 0 1em; }
.width-1-4 { width:25%; }
.width-2-4 { width:50%; }
.width-3-4 { width:75%; }
.width-4-4 { width:100%; }
<header class="site-header width-4-4 columns"></header>
<article class="site-content width-3-4 columns"></article>
<aside class="site-sidebar width-1-4 columns"></aside>
<footer class="site-footer width-4-4 columns"></footer>

Wie unschwer zu erkennen ist, befinden sich nun recht viele Klassen im HTML-Code, was mitunter kritisiert wird, aber nicht grundsätzlich dramatisch ist. Dennoch gibt es eine schlankere Lösung, die sog. semantischen Grids. Beachtet bitte, dass der Ausdruck »semantisch« in diesem Zusammenhang zwar üblich, aber nicht treffend ist. Klassen im HTML-Dokument besitzen keine semantische Bedeutung. Allerdings kann man darüber diskutieren, ob Klassen zur Steuerung des Raster-Verhaltens sinnvoll sind.

Bei einem semantischen Grid sieht der CSS-Code eher so aus:

.site-header, .site-content, .site-sidebar, .site-footer {
  float: left;
  padding: 0 1em;
}

.site-header, .site-footer {
  width: 100%;
}

.site-sidebar {
  width: 25%;
}

.site-content {
  width: 75%;
}

Das HTML-Markup ist in diesem Beispiel erfreulich schlank:

<header class="site-header"></header>
<article class="site-content"></article>
<aside class="site-sidebar"></aside>
<footer class="site-footer"></footer>

Da nun die Breite der Elemente direkt im jeweiligen Selektor definiert wird, und zusätzlich auch noch Eigenschaften von mehreren Selektoren geteilt werden, ist es ohne einen Präprozessor kaum denkbar das Dokument zu pflegen. An dieser Stelle kommt Sass ins Spiel.

Semantische Raster mit Sass

Um das oben gezeigte Beispiel nun mit Hilfe von Sass zu erzeugen, kann folgender Code verwendet werden. Zunächst erstellen wir eine Variable für die maximale Anzahl an Rasterspalten.

$grid-columns: 4;

Als nächstes erzeugen wir einen Placeholder (%column) für die Eigenschaften die jeder Spalte zugewiesen werden sollten. Placeholder haben in Sass den Vorteil, dass sie nicht direkt kompiliert werden, sondern erst, wenn mittels @extend ein Selektor um die Eigenschaften des Platzhalters erweitert wurde. Das spart häufig ein paar Zeilen Code.

%column {
  float:left;
  padding:0 1em;
}

Jetzt folgt die @for-Schleife, die ich bereits in diesem Beitrag erläutert habe. Die Schleife wird so oft durchlaufen, wie das Raster Spalten bekommen soll. Somit erzeugen wir weitere Placeholder mit dem Präfix width. Jeder dieser Placeholder besitzt nun die gemeinsamen Eigenschaften aus dem Placeholder %column, sowie eine individuelle Breite.

@for $i from 1 through $grid-columns {
  %width-#{$i}-#{$grid-columns} {
    @extend %column;
    width: percentage($i / $grid-columns);
  }
}

Die Berechnung der Placeholder ist nun abgeschlossen. Jetzt können wir, ebenfalls über @extend, die gewünschten Eigenschaften zuweisen.

.site-header {
  @extend %width-4-4;
}
.site-content {
  @extend %width-3-4;
}

.site-sidebar {
  @extend %width-1-4;
}

.site-footer {
  @extend %width-4-4;
}

Vollständiges Beispiel

Der vollständige Code sieht demnach so aus:

$grid-columns: 4;

%column {
  float:left;
  padding:0 1em;
}

@for $i from 1 through $grid-columns {
  %width-#{$i}-#{$grid-columns} {
    @extend %column;
    width: percentage($i / $grid-columns);
  }
}

.site-header {
  @extend %width-4-4;
}

.site-content {
  @extend %width-3-4;
}

.site-sidebar {
  @extend %width-1-4;
}

.site-footer {
  @extend %width-4-4;
}

Der kompilierte CSS-Code sieht so aus:

.site-sidebar, .site-content, .site-header, .site-footer {
  float: left;
  padding: 0 1em;
}

.site-sidebar {
  width: 25%;
}

.site-content {
  width: 75%;
}

.site-header, .site-footer {
  width: 100%;
}

Bitte beachtet, dass ich in diesem Beispiel nur die grundlegende Funktionsweise von »semantischen Rastern« mit Hilfe von @for-Schleifen und Placeholdern beschrieben habe. Ein komplexes Raster bietet deutlich mehr Möglichkeiten. Alternativ zu Placeholdern und @extend, werden häufig auch Mixins (@include) verwendet.

Links / Quellen

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. PureCSS
    schrieb am 15.05.2015 um 14:22 Uhr:

    …oder einfach so:

    [class*=column-] { float:left; padding: 0 1em; }
    .column-1 { width:25%; }
    .column-2 { width:50%; }
    .column-3 { width:75%; }
    .column-4 { width:100%; }

    Antworten
    • Jonas Hellwig
      schrieb am 17.05.2015 um 11:03 Uhr:

      Genau diese Klassen-Selektoren sollen ja nicht erzeugt werden. Mit Hilfe der Placeholder kann die Breite einem Element (z. B. der Sidebar) direkt zugewiesen werden.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →