CSS in der Webentwicklung – nicht so einfach, wie gedacht!

Entwickler: Hallo Yara, vielen Dank, dass du dir die Zeit für dieses Interview genommen hast! Dein Workshop auf den HTML5 Days heißt „CSS – Real World & Best Practices.“ Dabei räumst du mit so mancher Unart auf, etwa wenn CSS ans Ende der aktuellen Datei geschrieben wird. Welche Unarten sind dir „Real World“ noch so untergekommen?

Yara Mayer: Was ich am häufigsten sehe ist:

• Klassen, die innerhalb eines Projektes keiner Strategie, keinem Standard oder Gesamtkonzept folgen
• verkomplizierte Regeln und Abhängigkeiten, vor allem im Zusammenhang mit Responsiveness
• die ständige Nutzung von fixen Breiten und Höhen
• die Nicht-Nutzung von Variablen oder, am schlimmsten, wenn welche definiert, aber dann doch nicht immer benutzt werden.

Die Hauptgründe dafür sind fehlende Zeit, Kommunikation und/oder fehlendes Wissen bzw. Erfahrung.

Entwickler: Momentan sind ja Ansätze wie OOCSS, SMACSS und BEM im Gespräch. Wie stehst du dazu? Gehören die auch zu deinen Best Practices?

Entscheidend ist, dass man von Anfang bis Ende die gleiche Strategie verwendet.

Yara Mayer: Ein paar grobe Konzepte aus diesen Ansätzen sind, meiner Meinung nach, immer wichtig. Der Rest hängt davon ab, was für ein Projekt man gerade entwickelt. Wenn es Themes enthalten soll, dann gerne etwas wie OOCSS oder SMACSS. Aber auch dafür gibt es andere Lösungen, die durch einen Preprozessor oder CSS-Variablen ermöglicht werden.

Viel entscheidender ist für mich, dass man von Anfang bis Ende die gleiche Strategie verwendet. Im Workshop möchte ich aber noch über ein paar weitere Perspektiven reden.

Die Konsolidierung der JavaScript-Welt

Entwickler: Wo du gerade Preprozessoren erwähnst. Da gibt es ja Sass als Standard. Wo ist Sass aus deiner Sicht sinnvoll, wo nicht?

Yara Mayer: Ich würde eher sagen, dass es nicht schadet, es sei denn, man hat aus irgendeinem Grund nicht die Möglichkeit, einen Preprozessor zu benutzen. Davon abgesehen gibt es ein paar Gründe, warum es tatsächlich sinnvoll ist: Mixins (mit Parametern), Functions, Autoprefixing…

Entwickler: Die JavaScript-Szene hat den Ruf, besonders schnelllebig und fragmentiert zu sein. Mit TypeScript, Node, Angular, React und Vue scheinen sich allerdings in den letzten Monaten doch einige Konstanten herauszukristallisieren. Können wir da so eine Art Konsolidierung der JavaScript-Welt beobachten?

Yara Mayer: Ich denke schon. Vielleicht, weil alle zunehmend merken, dass es doch ein Tick zu viel ist. Man könnte sagen, dass es in dem Moment angefangen hat, als Node.js und io.js wieder zusammengeführt wurden. Natürlich ist es wichtig, neue Ideen auszuprobieren, aber man merkt, dass das JS-Ökosystem in letzter Zeit doch ziemlich erwachsen geworden ist und es nicht mehr so leicht ist, mit einem neuen Framework oder einer neuen Lib überhaupt Aufmerksamkeit zu bekommen.

Man merkt, dass das JS-Ökosystem in letzter Zeit doch ziemlich erwachsen geworden.

Typescript ist mittlerweile auch quasi der Defacto-Standard geworden – und das sage ich als ehemalige JavaScript-Puristin, die sehr gerne mit JSDoc gearbeitet hat. Es zeigt wieder, dass das Tooling doch einen großen Teil unseres Development-Workflows bestimmt. Wenn der TS Compiler und die ganzen IDEs nicht so ein hervorragendes IntelliSense (und damit riesige Vorteile) mitbringen würden, wäre es nur eine Nischen-Sprache geblieben.

Web Development Trends

Entwickler: Wenn du dir die aktuelle Szene der Webentwicklung anschaust – welchen Missstand würdest du gerne am schnellsten behoben sehen?

Yara Mayer: Wenn wir über CSS reden, dann ist es der Gedanke, dass CSS entweder doof, unwichtig, unerklärlich (aber gleichzeitig einfach) oder sogar „nichts für echte Entwickler“ ist. Das Problem ist, dass viele denken, CSS wäre simpel. Doch CSS ist viel komplizierter als Programmiersprachen. Warum?

• Alleine die Matrix aus möglichen Betriebssystemen, Browsern und Browser-Versionen sorgt für unendliche Möglichkeiten, dass irgendetwas anders als erwartet funktioniert.
• Es gibt extrem viele Konzepte, die man beherrschen muss, um CSS überhaupt gut schreiben zu können – insofern als man wissen muss, warum das eine oder andere funktioniert bzw. nicht funktioniert.
• CSS über den Lifecycle einer Application zu pflegen und sauber zu halten ist eine große Herausforderung, da Refactoring nur bedingt möglich ist und manchmal aufgrund von Zwischenabhängigkeiten oder der Benutzung eines CMS (wo HTML manchmal in der Datenbank gespeichert wird) gar nicht infrage kommt.
• Man kann zwar debuggen, aber wenn es einen „Bug“ gibt, ist es nicht so, dass man es über einen log oder Ähnliches mitbekommen könnte. Es ist nur visuell. Es gibt mittlerweile Lösungen, den CSS durch Screenshots usw. zu testen. Diese sind aber ziemlich aufwändig zu pflegen, da ein Kitchensink-Test alleine einfach nicht reicht. Meist sind solche Bugs kontextabhängig, weil irgendwelche Regeln unabsichtlich von anderen beeinflusst werden.

Wenn wir über JavaScript reden, ist es das ganze Tooling. Webpack ist für mich die wunderbarste Erfindung der letzten Jahre, aber auch die schlimmste. Doch wenn ich sehe, wieviel Aufmerksamkeit Parcel bekommen hat, dann weiß ich, dass viele Leute der gleichen Meinung sind.

Oder z.B. wie sich die Angular CLI entwickelt hat – sodass man so wenig wie möglich konfigurieren muss und alles „Out-of-the-Box“ funktioniert (ja, es gibt ein paar wichtige Features, die noch fehlen, aber auf die verzichte ich trotzdem gerne). Es gibt natürlich viele Menschen, die sich gerne mit Tooling beschäftigen – und das ist völlig in Ordnung. Aber wenn man sich auf Features konzentrieren möchte, wird es mit viel Tooling eher schwierig. Es ist nicht selten, dass man ein paar Tage lang nur mit Tooling zu kämpfen hat, statt sich auf seine/ihre eigentliche Aufgabe konzentrieren zu können.

Entwickler: Und welcher Trend interessiert dich persönlich momentan am meisten?

Trends in Technologien bewegen sich weitgehend im Kreis.

Yara Mayer: Trends in Technologien bewegen sich weitgehend im Kreis. Wir erreichen einen bestimmten Höhepunkt und kommen dann immer wieder zurück zu den Basics. Ein Beispiel dafür ist, wie sehr Angular und React von der DOM abstrahiert sind und wie wir uns langsam Richtung „Custom Elements“ bewegen. Selbst Vue.js orientiert sich schon lose daran. Deswegen versuche ich immer, pragmatisch zu bleiben, alles neutral zu betrachten und die interessantesten Konzepte zu verwenden.

Aber ich freue mich darauf, was als nächstes kommt. Ich denke, vor allem dort, wo es um Schnittstellen geht, aber auch im Thema Frontend vs/+ Backend, wird sich noch einiges bewegen.

Entwickler: Vielen Dank für dieses tolle Gespräch!

Interviewt von: Hartmut Schlosser

Content-Stratege, IT-Redakteur, Storyteller – als Online-Teamlead bei S&S Media ist Hartmut Schlosser immer auf der Suche nach der Geschichte hinter der News. SEO und KPIs isst er zum Frühstück. Satt machen ihn kreative Aktionen, die den Leser bewegen. @hschlosser