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 Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Stefan
    schrieb am 05.08.2023 um 20:51 Uhr:

    Hallo Jonas,
    erstmal herzlichen Dank für dein Tutorial.

    Du schreibst oben: „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“

    Sorry, aber das leuchtet mir gerade überhaupt nicht ein. Bin ganz auf deiner Seite „semantischere“ Grids aufzubauen, aber wie genau meinst du die Aussage „viel zu hoch“?

    Letzten Endes konstruiert Sass doch den gleichen CSS code. Und letztlich musst du ja den HTML Elementen ebenfalls eine entsprechende Klasse zuweisen und arbeitest in zwei Dateien.

    „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.“
    => Das leuchtet schon ein, aber in diesem Fall wird ja kein Code gespart..

    „…Mit Hilfe der Placeholder kann die Breite einem Element (z. B. der Sidebar) direkt zugewiesen werden.“
    => Das mache ich doch sonst auch einfach in der CSS Datei

    Mir leuchten die Vorteile da jetzt (noch) nicht ein. Ich sags mal so, das habe ich doch dreimal so schnell im CSS geschrieben, als mit Sass über eine Schleife generiert.

    Ausser gewissen Mixins kann ich mich mit Sass irgendwie noch nicht so richtig anfreunden.. ;-

    Beste Grüße, Stefan

    Antworten
    • Jonas Hellwig
      schrieb am 07.08.2023 um 13:34 Uhr:

      Hallo Stefan, ähnlich wie klassenbasierte Grids ist auch der hier beschriebene SCSS-Ansatz mittlerweile durch Flexbox und Grid weitestgehend abgelöst worden. Unabhängig davon aber zu deinen Fragen:

      • Der Aufwand ist mit SCSS viel geringer, da die CSS-Klassen mit einem Loop schneller erzeugt werden können, als wenn du sie von Hand schreibst. Es geht hierbei um das Erzeugen der Klassen-Struktur in der CSS-Datei. Wenn du ein 12-spaltiges Grid mit lediglich drei Breakpoints nutzt, hast du ja schon 36 Klassen die geschrieben werden müssten. Aber ja – am Ende hast du mit Sass das gleiche Erzeugt, was du auch mit CSS schreiben könntest. Aber das ist bei Sass ja immer so.
      • Bei den Placeholdern wird Code gespart, da die CSS-Selektoren von Sass intelligenter zusammengefasst werden. Andererseits brauchst du dadurch auch im HTML-Code weniger Klassen. Statt z.B. column column-3 schreibst du dann nur noch column-3.
      Antworten
      • Stefan
        schrieb am 08.08.2023 um 17:05 Uhr:

        Ja da hast du Recht, Sass macht an einigen Stellen schon Sinn. Vielen Dank für deinen Support!

  2. 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 →