CSS (R)Evolution

Die Problematik der CSS-Skalierbarkeit

Eine Erklärung zu BEM finden Sie in meinem letzten Blogbeitrag. Niemand verwendet die BEM-Notation, weil es Spass macht, lange Selektoren mit Unterstrichen oder doppelten Trennstrichen zu verwenden, sondern um einzigartige Selektornamen zu erzeugen, die es ermöglichen, Styles zu isolieren und einen «scope» zu schaffen, der mit der Komponente in Verbindung steht. CSS weist hierbei aber grundsätzliche Schwierigkeiten auf:

1. Globaler Namespace
2. Abhängigkeiten (Vererbungen)
3. Ungenutzter Code
4. Komprimierung (minifying)
5. Teilen von Konstanten
6. Nicht-deterministische Auflösung
7. Isolation

Die Javascript-Revolution

Mit dem Aufstieg von ReactJS zu einer der meistverwendeten Frontend-Bibliotheken für Single-Page-Anwendung (SPA) könnte in Zukunft alles, was wir die letzten Jahre gebraucht haben, um die oben genannten Probleme zu lösen und unser HTML-Markup in grösseren Applikationen zu stylen (z.B. BEM+ITCSS), plötzlich «überflüssig» werden. ReactJS, aber auch andere komponentenbasierte Javascript Frontend-Libraries wie z.B. VueJS bauen auf dem Prinzip auf, dass jede Komponente ein JS-Modul ist, in welchem die HTML-Struktur und auch dessen Styles gekapselt werden können. Mittels Javascript bieten sich uns nun beinahe unendliche Möglichkeiten, komplett funktionelle und dynamisch veränderbare Komponenten zu generieren.

HTML (JSX) in ReactJS

JSX ist eine Javascript-Syntax-Erweiterung, die zum Arbeiten mit React empfohlen wird. Bei der «Tag-Schreibweise», die uns von HTML bekannt ist, nun aber innerhalb von Javascript steht, handelt es sich wie im Beispiel der Konstante «element» gezeigt weder um einen String noch um HTML, sondern um JSX. Dies soll helfen, durch einfachere Schreibweise HTML-Elemente zu erzeugen.

React wandelt dies später durch einen Preprozessor in reines Javascript um. Genauer gesagt wird jedes «Tag» in einen Funktionsaufruf umgewandelt, welcher echtes HTML im DOM erzeugt.

CSS in ReactJS

Mittels React bieten sich nun verschiedene Möglichkeiten, eine Applikation und deren Komponenten zu stylen. Ich würde sogar sagen, es sind mehr als bei traditionellen Webapplikationen. Einige dieser Optionen sind zum Beispiel:

Standard CSS

Die traditionelle Art, CSS zu schreiben und zu verwenden: ein «styles.css» erstellen, alle Stile darin definieren und entsprechend innerhalb einer Komponente unter Verwendung von JSX via «className» oder «id»-Attribut verknüpfen. In React, unter Verwendung von JSX, würde dies so aussehen:

Inline Styles

Styled Components

Viel interessanter wird es aber nun, wenn wir weitere Bibliotheken wie z.B. «styled-components» einsetzen. Sie helfen uns, das Beste aus Javascript (>ES6) und CSS zu vereinen, um unsere Applikationen zu stylen.

Vorteile, die das mit sich bringt:

• CSS kann mit allen Eigenschaften (nesting, media queries usw.) in Javascript verwendet werden.
• Nur Stile, die tatsächlich gebraucht werden, werden generiert und eingebunden, vollautomatisch.
• CSS-Stile, die an eine Komponente gebunden sind, werden beim Löschen der Komponente mitgelöscht.
• Automatische Generierung von einzigartigen Klassennamen für CSS-Stile.
• Keine Probleme mehr mit Duplikationen, Überlappungen oder unerwünschten Vererbungen.
• Dynamische Erstellung von Stilen durch Eigenschaften (props) einer Komponente.
• Einfachere Wartung und Skalierbarkeit.
• Automatisches «vendor-Prefixing» für Browsersupport usw.

Template literals seit ES6/ES2015

Eine wesentliche Neuerung in Javascript ES6 erlaubt es, solche mehrzeiligen Ausdrücke wie oben abgebildet zu verwenden. Sogenannte Template-Strings (literals) sind Zeichenketten, die eingebettete Ausdrücke erlauben. Mit diesen Ausdrücken können mehrzeilige Strings und String-Interpolation genutzt werden. Markiert werden diese durch «Back-Ticks» anstelle von einfachen oder doppelten Anführungszeichen.

Fazit

Ob es sich nun lohnt, den Frontend-Entwicklungsstack auf Javascript und beispielsweise ReactJS umzustellen und vom klassischen «BEM+ITCSS»-Ansatz wegzukommen, muss situativ entschieden werden. Auch wenn die Vorteile von solchen JS-Bibliotheken in Bezug auf Schwierigkeiten wie «Namespace-Konflikte» oder Vererbungen in CSS auf der Hand liegen, gehen die Meinungen bei diesem Thema sicher weit auseinander. Eine Entscheidung kann zusätzlich von weiteren Faktoren wie Projekt- und Teamgrössen, aber auch bereits vorhandenem Know-how der Entwickler abhängen. Die Wahrheit kann auch irgendwo dazwischen liegen, denn auch wenn mit ReactJS getrost auf eine BEM-Notation verzichtet werden kann, ist der ITCSS-Ansatz für eine geschichtete Ordnerstruktur inkl. CSS-Layern weiterhin dienlich, um Komponenten und deren Files zu organisieren. 

#theCodingLove