Ich spreche schon seit einigen Jahren auf Konferenzen und in Inhouse-Schulungen über modulare Webentwicklung. Meiner Meinung nach wird die Architektur unserer Frontends noch immer zu stiefmütterlich behandelt. Doch so langsam kommen Firmen zu der Erkennntnis, dass ihre Applikationen über die Jahre gewuchert und kaum noch zu pflegen sind.

Die Praxis

Anfang des Jahres habe ich bei einer Firma in Köln einen Workshop veranstaltet, bei dem das grosse Ziel war, eine Überarbeitung des CSS anzustossen. Ich legte erst einmal die Grundlagen, wie ich es auch in knapper Form auf Konferenzen tue. Wir sprachen dabei natürlich über die richtige Benamung. Vor allem BEM wird in diesem Zusammenhang gerne genutzt. Am Ende finde ich die richtige Benamung nur mittelwichtig. Es ist wichtig, eine konsistente Benamung zu nutzen. In meinen Augen ist genau die Methode richtig, die für alle Teammitglieder intuitiv am Besten funktioniert. Die korrekte Benamung muss ein Selbstläufer sein.

Wichtiger fand ich hingegen, dass das Team sich auf einen Präprozessor einigen konnte, um den Nutzen daraus zu ziehen. Dabei konzentrierte ich mich im Wesentlichen auf einen Aspekt: die Aufteilung in kleine Dateien, die nur noch den Code eines Moduls beherbergen und am Ende zu einem einzigen CSS-File zusammengefasst werden. Die anderen, sehr speziellen Eigenschaften eines Präprozessors kommen dann von allein mit der Nutzung.

Die Aufteilung des CSS in viele Einzelteile hatte ein erstes wichtiges Ergebnis: seit Langem schauten endlich mal wieder zwei Entwicklerinnen das CSS genau durch und identifizierten Codebereiche, die obsolet geworden waren. So wurden nur durch die Aufteilung des CSS in kleine, handliche Fragmente, 2000 Zeilen Code von ehemals knapp über 5000 Zeilen Code entfernt.

Die verbliebenen Modul-Dateien sollten dann von überspezifischen Regeln gesäubert werden. Erst danach sollte das Team daran gehen, evtl. eine andere Nomenklatur anzuwenden. Es war interessant zu sehen, wie durch die Anwendung der gelernten Prinzipien das Verständnis derselben wuchs. Den Stolz über das erste Zwischenergebnis konnte ich sehr gut verstehen.

Demnächst werde ich in Mainz eine Firma über einen kleinen Zeitraum dabei begleiten, erst das CSS zu bereinigen und dann möglicherweise auch das HTML. Das spannende dabei wird sein, dass alles „am offenen Herzen“ geschehen wird, also im laufenden Betrieb am eigentlichen Produkt. Ich bin sehr gespannt. Auch hier wuchs und wucherte das CSS über ein Jahrzehnt, sodass es nicht mehr wartbar ist. Ein spannender, aber ein machbarer Auftrag.

Die Theorie

Auf dem Webkongress Erlangen habe ich mein Leib- und Magenthema „modulares CSS“ diesmal mit einem leicht anderen Fokus behandelt (das Video des Vortrags). Ich finde zwar BEM und SMACSS interessant, aber es handelt sich dabei mehr um Geschmacksfragen. Viel wichtiger erscheint mir, dass wir für echte Modularität im Frontend leider noch nicht alle erforderlichen Techniken besitzen. Denn während das Layout mit Mediaqueries eine passende Technik für responsive Webseiten besitzt, haben wir diese für die Module nicht.

Der Bezugspunkt des Layouts ist der Browser, deshalb sind Mediaqueries hier angebracht. Der Bezugspunkt der Module ist hingegen das Layout, nicht der Browser. Wir benötigen also spezielle Mediaqueries, die sich auf die direkte Umgebung, nicht auf den Browser beziehen. Diese Technik wird u.a. unter den Begriffen „Element Queries“ oder „Container Queries“ diskutiert. Aktuell sind wir dabei auf JavaScript angewiesen. Das ist für mich leider keine echte Alternative.

Wir werden uns in den kommenden Jahren sicher noch häufiger mit diesem Thema beschäftigen. Ich bleibe auf alle Fälle dran. Denn egal wie modern Techniken sind, wenn die Grundarchitektur nicht stimmt, läuft man früher oder später in Probleme. Deshalb kümmere ich mich gerne um Frontend-Architektur, obwohl das Thema weit weniger sexy klingt als Flexbox oder Animationen. Gerne helfe ich auch Ihren Entwicklern dabei, das gewuchterte CSS zu bändigen.