Ich arbeite aktuell an der Fertigstellung meiner Gedanken zu modularer Webentwicklung. Im Laufe der Bearbeitung habe ich Ideen gelesen und weiter verarbeitet, die nun in der endgültigen Fassung keinen Platz mehr bekommen. Deshalb veröffentliche ich meine kurzen Gedanken unabhängig vom endgültigen Text.

Addy Osmani von Google hat in einem kurzen Artikel beschrieben, wie seiner Meinung nach JavaScript-Komponenten oder Teile einer UI programmiert werden sollen. Das passt nicht nur auf JavaScript, sondern auch auf CSS. Er bildet das Akronoym FIRST:

  • Keep it (F)ocused.
  • Keep it (I)ndependent.
  • Keep it (R)eusable.
  • Keep it (S)mall.
  • Keep it (T)estable.

Ich adaptiere das Akronym einmal sehr frei für CSS.

Focused – Fokussiert

Schreiben Sie das CSS für ein Modul in einer separaten Datei. Es gibt wenige Styles, die zusammengefasst in einer Datei erstellt werden sollten. Ein Modul gehört in eine einzige Datei. Arbeiten Sie an diesem Modul innerhalb einer möglichst isolierten Umgebung bis es vorzeigbar ist. Committen Sie danach diese Arbeit, damit der Commit sich nur um das Modul dreht.

Independent – Unabhängig

Ein Modul ist ein Universum für sich. Es sollte unabhängig von anderen überall auf einer Webseite existieren können. Es sollte zudem unabhängig von Projekten exisitieren können. Damit ist nicht die konkrete Optik gemeint. Die sollte sich natürlich dem jeweiligen Projekt anpassen. Aber ein Suchformular, eine Navigation oder ein Teaser sollte in jedem Projekt gleich funktionieren. Modifikationen an der Optik sind nebensächlich und gehören zum Geschäft dazu.

Reusable – Wiederverwendbar

Ein Modul sollte so geschrieben sein, dass es in einem anderen Projekt genutzt werden kann.

Small – Klein

Das resultierende CSS ist in der Erstellungsphase in viele kleine Einzelteile (dank Sass, Less oder Stylus) aufgesplittet. Das erleichtert die Arbeit im Team, denn die Teammitglieder können an jeweils getrennten kleinen Einzeldateien arbeiten.

Testable – Testbar

Die Arbeit in einer Pattern Library bietet einen isolierten Platz, der sich durch automatisierte Test-Tools einfacher und schneller abarbeiten lässt, als in einer komplexen Seite. Schon durch die Zusammenstellung mit ähnlichen Modulen kann ohne zusätzliches Tool ein ungewolltes Ausgreifen von CSS-Regeln erkannt werden.