Springe zum Inhalt

Bei der Arbeit an Websites gibt es mehrere Möglichkeiten, den CSS-Code zu strukturieren. Während ein Ansatz darin besteht, möglichst nur eine Klasse pro Element zu verwenden und alles Weitere im Stylesheet zuzuordnen, besteht ein oft gebräuchlicher Ansatz darin, mehrere generische Klassen pro Element zu verwenden. In diesem Artikel geht es darum, wie der Ansatz mehrerer Klassen möglichst übersichtlich verwendet werden kann.

Warum mehrere Klassen pro Element?

Ein typisches Beispiel für eine Klasse pro Element in BEM-Namenskonvention:

<article class="article">
  <div class="article__content"></div>
</article>

Für einzelne Widgets mag das vollkommen ausreichen, sobald aber Frameworks wie Twitter Bootstrap zum Einsatz kommen, kann es oft komfortabler sein, deren Helferklassen zu verwenden, z.B. für das Rastersystem. Ich persönlich finde den Code so übersichtlicher, als wenn alles nur im Stylesheet geregelt würde. Darüber hinaus lassen sich somit Wiederholungen im CSS-Code vermeiden. Mit dem Einsatz von Helferklassen werden class-Attribute aber schnell sehr lang und Klassen verschiedener Aufgabenbereiche vermischen sich:

<article class="article row">
  <div class="article__content col col-md-6 col-xl-6"></div>
</article>

Ich brauche oft auch eine Klasse für HTML-Code, welcher von einem CMS wie WordPress oder Kirby über über einen WYSIWYG-Editor oder aus Markdown generiert wurde. Dieser ist meist sehr generisch und hat kaum Klassen. Von daher lässt es sich am meist am besten durch eine Klasse auf dem Container-Element und Kindselektoren stylen. Inzwischen nenne ich diese Container-Klasse meistens richtext. Ein Beispiel:

.richtext p  { margin-bottom: 1.5rem; }
.richtext h2 { font-size: 1.25em; […] }

Auf dieser Website kommt noch die Klasse hyphenate für Absätze hinzu, auf dessen Inhalt per JavaScript Silbentrennung angewendet werden soll. Die Klassenliste wird schnell sehr lang und unübersichtlich:

article__content richtext hyphenate col col-md-6 col-xl-6

Klassen mit Trennzeichen strukturieren

Abhilfe schaffen Trennzeichen zwischen den Klassennamen im HTML-Attribut. Klassen stellen laut Spezifikation eine durch Leerzeichen getrennte Liste dar. Die Integration zusätzlicher Zeichen stellt also für keinem Browser ein Problem dar, wie Harry Roberts in Grouping related classes in your markup zusammenfasst. Ich habe mir folgendes Schema angewöhnt:

                    +--- Utility ----+
                    |                |
article__content  / hyphenate richtext [ col col-md-8 col-xl-6 ]
|              |                       |                       |
+- BEM / Name -+                       +-------- Grid ---------+
  • BEM / Name: Name des Elements, so wie eventuelle Modifier. Beispiele: article__content, article__content--feature etc.
  • Utility: Allgemeine Helferklassen, die durch das Framework vorgegeben werden. Beispiele: richtext (für Inhalte aus einem WYSIWYG- oder Markdown-Editor), text--small, no-select etc.
  • Grid: Layoutspezifische Klassen des Rastersystems.

Das folgende Beispiel zeigt, dass durch den Einsatz von Trennzeichen auch lange Klassenlisten sehr übersichtlich sein können:

<article class="page page--about [ container ]">
  <div class="article__body [ row ]">
    <div class="article__content / richtext hyphenate [ col col-md-8 col-xl-6 ]">
     [...]
   </div>
  </div>
  [...]
</article>

Fazit

Ich habe den oben beschriebenen Ansatz konsequent bei der Umsetzung dieser Website angewendet und bin sehr zufrieden mit der gesteigerten Lesbarkeit meines Codes. Nachteile gibt es aus meiner Sicht keine bedeutenden, solange zwischen Trennzeichen und den eigentlichen Klassennamen immer mindestens ein Leerzeichen ist. Sollte der Code mit Anderen zusammen bearbeitet werden, sollte aber zumindest vorher im Team darüber geredet werden, weil diese Syntax für die meisten Entwickler*innen (noch) sehr ungewöhnlich aussehen dürfte.

Auf der eigenen Website geantwortet? Sende eine Webmention!

Wird geladen ...