Think About! Meetup: Component-based CSS

Am 8. August waren die Macher*innen der Think About! Conference zum dritten Mal mit ihrem Meetup bei uns zu Gast. Mirjam Bäuerlein präsentierte den Vortrag „Organise your styles with a Component-based CSS approach“. Rund 30 Interessierte kamen zu Vortrag und Diskussion in unserem Kölner Office zusammen.

In ihrem Vortrag zeigte Mirjam, welche Probleme je nach Schnitt der CSS-Klassen entstehen. So bereiten reine auf Komponenten basierende Klassen Probleme, wenn sich Komponenten zwar sehr ähnlich sind, aber an manchen Stellen unterscheiden. Wie geht man mit dem duplizierten Code vor?

Als Gegenentwurf stellte sie Functional CSS vor.

.arial { font-family: Arial; }
.font-1rem { font-size: 1rem; }
.font-2rem { font-size: 2rem; }
.font-color-cornflower-blue { color: $cornflower-blue; }
.background-color-black { background-color: black; }
.round-corners-bottom-8px { border-radius: 0 0 8px 8px; }

Kernidee von Functional CSS ist die Komposition kleiner spezialisierter Klassen im Markup, um das gewünschte visuelle Ergebnis zu erzeugen. Zwei verschiedene Elemente, die sich ähneln und sich in nur wenigen properties unterscheiden, lassen sich dann problemlos durch Komposition der entsprechenden Klassen erzeugen:

<div class="arial font-2rem font-color-cornflower-blue round-corners-bottom-8px"></div>
<div class="arial font-1rem font-color-cornflower-blue round-corners-bottom-8px"></div>

Allerdings würde das bei einem Redesign enorme Aufwände erzeugen. Mirjam entschied sich daher bei ihren Projekten für einen Kompromiss aus den beiden vorgestellten Ansätzen. Jeder Style fällt bei ihr in je eine von drei Kategorien:

  • Basic – general styles like: font styles, colors
  • Utility (functional) classes – repeating styles that can be used universally
  • CSS Component – counterpart to our website component

Die Basic Styles stellen einen Styleguide dar („They tell you how your brand looks and behaves“). Sie schaffen eine Grundlage auf der die weiteren Styles aufgebaut werden.
Die Utility Klassen bilden das ab, was regelmäßig benötigt wird: Grundlegende Layout properties und z.B. vorgefertigte Spacer Klassen. Damit ist gewährleistet, dass Element-Abstände konsistent sind. Component Klassen entsprechen den Bausteinen der Website.

Nach dem Vortrag ergab sich eine angeregte Diskussion, in der u.a. die Möglichkeiten von CSS-Präprozessoren diskutiert wurden, um die Wiederverwendbarkeit von CSS Styles zu verbessern.

Zum Weiterlesen:

 

Zur Blog-Startseite