SMACSS und BEM – nützliche Tools zur CSS-Optimierung

Die Formatierungssprache CSS ist einerseits leicht zu erlernen – andererseits lässt sie sich nur schwer strukturieren und macht es den Entwicklern vor allem in Großprojekten nicht leicht, den Überblick zu behalten. Da kommen SMACSS und BEM wie gerufen: Hierbei handelt es sich um Methoden, die eine Strukturierung von CSS-Code ermöglichen.

SMACSS: Alles schön geordnet

Mit SMACSS (Scalable and Modular Architecture for CSS) kommt Ordnung in jedes CSS-Monstrum: Es kann wie ein Style-Guide verstanden werden. Einzelne, wiederkehrende Elemente wie Tabellen, Buttons oder Formulare werden vom Basis-Styling, z. B. Hintergrund, Layout, Schriftart oder Seitentyp, getrennt und erhalten eigene Dateien. Das sorgt für einen modularen Aufbau des Styles.

Die Vorteile liegen klar auf der Hand: Man kann sich dank SMACSS schnell in einem CSS zurechtfinden. Es macht den Code besser erfass- und lesbar. Das ist beispielsweise für Entwickler ideal, die neu zu einem Projekt hinzukommen und sich zunächst einarbeiten müssen. Anhand der übersichtlichen Ordnerstruktur ist sofort erkennbar, wo neue Styles eingefügt werden müssen. Die Methode eignet sich deshalb besonders gut für umfangreiche Projekte.

Kleines Beispiel: Änderung von Farbwerten
Farbwerte werden in Variablen gespeichert und durch Referenzierung auf verschiedene Dateien übertragen. Um eine Farbanpassung für alle Dateien umzusetzen, muss also lediglich der Farbwert in der Variable geändert werden. Damit der in den Variablen hinterlegte Name allerdings den richtigen Inhalt widerspiegelt, muss dieser in allen Dateien angepasst werden. Nur so bleibt die Farbanpassung später nachvollziehbar.

BEM: Eine Klasse für sich

BEM bedeutet „Block Element Modifier“ und beschreibt die drei Einheiten (Klassen), in die diese Methode einen CSS-Code unterteilt. Bei einem Block handelt es sich um einen unabhängigen Teil einer Benutzerschnittstelle, beispielsweise ein Menü, ein Kontaktformular oder auch einen Button. Ein Block ist in verschiedenen Zusammenhängen wiederverwendbar und kann weitere Blöcke oder Elemente enthalten. Elemente sind strukturell an einen Block gebunden (Kind-Element), z. B. das Textfeld, das in einem Button steht. Ein Modifikator (Modifier) definiert eine bestimmte Eigenschaft eines Blocks bzw. Elements oder bildet dessen Zustand ab, etwa, dass der Button rot eingefärbt ist. Alle Blöcke, Elemente und Modifikatoren werden durch Klassen dargestellt, und per Benennung ist es möglich, ihre jeweilige Aufgabe und Beziehung untereinander zu definieren.

Der Vorteil: Während beispielsweise eine ID nur einmal vergeben werden kann, ist es möglich, Klassen mehrmals zu verwenden und ein Element dennoch eindeutig zu benennen. Alle zusammengehörigen Klassen können auf einen Blick erfasst werden. Wie bei SMACSS verbessert auch BEM die Lesbarkeit eines Codes und erleichtert es Entwicklern, die an der Gestaltung nicht beteiligt waren, schneller einzusteigen. Außerdem kann mit BEM ein CSS wie ein Stammbaum aufgebaut und stetig erweitert werden.

Darin liegt allerdings auch der Nachteil: Durch die Wiederholung von Stämmen und aufgrund unterschiedlicher Klassennamen wird der CSS-Code immer länger – und die entsprechende Datei größer. Je nach Umfang kann das zunehmende Wartezeiten beim Laden einer Website bedeuten.

SMACSS und BEM – eine gute Kombi

Die Praxis zeigt, dass man beide Methoden sehr gut miteinander verbinden kann. Wer sich für eines entscheiden möchte: Ob die Wahl auf SMACSS oder BEM fällt, liegt zum einen an den persönlichen Vorlieben des Entwicklers und zum anderen auch an den Eigenschaften und Umfang des jeweiligen Projekts.