„Wir hatten 90 % ungenutztes CSS, weil jeder Angst hatte, die alten Sachen anzufassen“

Im JS Party Podcast

[Kend C. Dodds]: […] Fragen Sie jeden, der regelmäßig mit altem CSS gearbeitet hat, und er wird Ihnen sagen: „Ich weiß nicht, ob es in Ordnung ist, das zu ändern, also dupliziere ich es.“ Und jetzt hatten wir – bei PayPal (das ist keine Erfindung) hatten wir 90 % ungenutztes CSS bei dem Projekt, an dem ich arbeitete, weil jeder Angst hatte, die alten Sachen anzufassen. Also haben wir einfach etwas Neues dupliziert und es anders genannt. Und man könnte sagen, wir sind schlecht in CSS, aber vielleicht war CSS schlecht zu uns, ich weiß es nicht… [Gelächter]

[Emma Bostain]: Nun, deshalb waren styled-components und CSS-in-JS so wegweisend; es war wie: „Oh, hey, wir können all diese Logik tatsächlich in die Komponente einkapseln, die sie berührt, und müssen uns keine Sorgen mehr um überlaufenden Code machen.“ Es ist viel einfacher, Dinge zu löschen, hinzuzufügen und all diese Dinge.

[Kend C. Dodds]: Ja, Sie haben absolut Recht. Das war das Problem, das diese Dinge lösen sollten.

Audio-Clip

Ich habe diese genaue Geschichte schon mehrmals gehört, meist von großen Unternehmen. Viele Entwickler, typische Entwicklerfluktuation… niemand weiß, was CSS tatsächlich verwendet wird und was nicht, weil das ein sehr schwieriges Problem ist.

Das ist einer der Gründe, warum ich Komponenten-basierte Styling-Lösungen (CSS-in-JS, wenn Sie wagemutig sind) manchmal mag. Nicht, weil ich komplexes Tooling liebe. Nicht, weil ich JavaScript-Syntax besser finde als CSS. Wegen der Co-Location von Stilen und Komponenten. Weil niemand Angst vor den Stilen hat – sie sind eng mit dem verknüpft, was sie stylen. Es ist nicht bei jedem Projekt notwendig, aber wenn Sie ohnehin mit Komponenten bauen (eine ziemlich nette Art, Front-Ends zu architekturieren, die kein JavaScript benötigt), können Sie genauso gut auf diese Weise stylen.

Aus diesem Grund freue ich mich, dass „scoped styles“ in Standarddiskussionen ein kleines Comeback feiern.

Ich erinnere mich an eine alte Idee (die vielleicht sogar kurzzeitig in Browsern ausgeliefert wurde?), bei der man einfach einen <style scoped> Block direkt in den HTML-Code warf und die Stile auf den übergeordneten Teil beschränkt waren, was auch immer der übergeordnete Teil war. Das war so cool, ich wünschte, wir könnten das wieder haben.

Aber es scheint, dass die neueren Dinge (hier ist Miriam's ursprünglicher Vorschlag) einige clevere Sachen haben, die dieses grundlegende Konzept nicht abdeckt – wie die Möglichkeit, eine untere Grenze zusätzlich zu einer oberen Grenze festzulegen, wodurch es möglich wird, „donutförmige“ Stile im DOM zu beschränken (ein Begriff von Nicole Sullivan). Was auch immer passiert, schatten-DOM-freie, eingeschränkte Stile mit Null-Tooling sind riesig.