Springe zum Inhalt

Bei der Arbeit an Websites gibt es mehrere Möglich­keiten, den CSS-Code zu struk­tu­rieren. 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äuch­licher 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-Namens­kon­vention:

<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 komfor­tabler sein, deren Helfer­klassen zu verwenden, z.B. für das Raster­system. Ich persönlich finde den Code so übersicht­licher, als wenn alles nur im Stylesheet geregelt würde. Darüber hinaus lassen sich somit Wieder­ho­lungen im CSS-Code vermeiden. Mit dem Einsatz von Helfer­klassen werden class–Attribute aber schnell sehr lang und Klassen verschiedener Aufga­ben­be­reiche 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 Kinds­e­lektoren 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 Silben­trennung angewendet werden soll. Die Klassenliste wird schnell sehr lang und unüber­sichtlich:

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

Klassen mit Trenn­zeichen struk­tu­rieren

Abhilfe schaffen Trenn­zeichen zwischen den Klassennamen im HTML-Attribut. Klassen stellen laut Spezi­fi­kation eine durch Leerzeichen getrennte Liste dar. Die Integration zusätz­licher Zeichen stellt also für keinem Browser ein Problem dar, wie Harry Roberts in Grouping related classes in your markup zusam­menfasst. 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 Helfer­klassen, die durch das Framework vorgegeben werden. Beispiele: richtext (für Inhalte aus einem WYSIWYG- oder Markdown-Editor), text--small, no-select etc.
  • Grid: Layout­spe­zi­fische Klassen des Raster­systems.

Das folgende Beispiel zeigt, dass durch den Einsatz von Trenn­zeichen auch lange Klassen­listen 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 gestei­gerten Lesbarkeit meines Codes. Nachteile gibt es aus meiner Sicht keine bedeu­tenden, solange zwischen Trenn­zeichen und den eigent­lichen 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.



Dieser Artikel ist lizenziert unter einer Creative Commons Namens­nennung – Weitergabe unter gleichen Bedin­gungen 4.0 Inter­na­tional Lizenz.

Wird geladen ...