Die Unterschiedlichen Perspektiven auf die CSS-in-JS

0
30

Einige Leute geradezu hassen die Idee von CSS-in-JS. Nur der name ist anstößig. Hart keine. Styling gehört nicht in CSS, es gehört in CSS, einer Sache, die bereits vorhanden und Browser optimiert sind, zu verwenden. Die Trennung von Bedenken. Alles andere ist lächerlich Fehltritt, ein Zeichen, nicht lernen aus den Fehlern der Vergangenheit (wie der <font> – tag und so.)

Manche Menschen geradezu vernarrt in die Idee von CSS-in-JS. Die co-location von Vorlagen und Funktionen, à-la-die meisten JavaScript-frameworks hat sich bewährt, um Sie, so Verpackung im Stile scheint wie eine Natürliche Passform. Vue ist eine einzige Datei, die Komponenten sind ein Archetyp hier.

(Hier ist ein video von CSS-in-JS habe ich mit Dustin Schau, wenn Sie brauchen einen primer.)

Brent Jackson denkt, sollte man auf jeden Fall lernen, sondern bietet auch einige pragmatische Punkte auf, was es tut und nicht tut:

Was bedeutet CSS-in-JS tun?

  • Lassen Sie die Autor CSS-in JavaScript-syntax
  • Colocate Stile mit Komponenten
  • Profitieren Sie von native JS-syntax-features
  • Nutzen Sie etwas aus der JS-ökosystem

Was bedeutet CSS-in-JS nicht entfernen Sie brauchen, um zu verstehen:

  • Wie die styles angewendet werden, um den DOM
  • Wie Vererbung funktioniert
  • Wie CSS-Eigenschaften funktionieren
  • Wie CSS-layout funktioniert

CSS-in-JS nicht entbinden, Sie lernen von CSS. Meist, sowieso.

Ich habe gehört, viele pushback auf CSS-in-JS-im Stil von “Sie sind die Menschen erreichen, für die CSS-in-JS, weil Sie nicht verstehen, “CSS” oder “Sie tun dies, weil Sie Angst vor der Kaskade. Ich weiß schon, wie der Umfang von CSS.” Ich finde das Zeug, mehr zu sein, Stossen über den Inseln, das ist nicht besonders hilfreich.

Laura Brötchen hat eine wunderbar zweiseitigen Artikel mit dem Titel “Das web, ohne web” Teil, die über Reagieren und CSS-in-JS:

Ich hasse Reagieren, weil CSS-in-JS-Ansätze standardmäßig ermutigen, Sie zu schreiben, komplett eigenständig eine aus Komponenten, anstatt zu versuchen, eine website zu bauen-UI-up als ganzes.

Sie nicht brauchen, um den Einsatz von CSS-in-JS-einfach, weil Sie Nutzung Reagieren, aber es ist beliebt, und das ist eine sehr interessante und faire Kritik. Wenn Sie Bereich alles, sind Sie nicht setzen sich selbst einem höheren Risiko der Inkonsistenz?

Ich habe, so weit, ein fan von CSS Module, dass es etwa so hell, wie Sie kommen, wenn es um die CSS-in-JS, nur die Handhabung scoping-und co-location-und das ist über es. Ich benutze es mit Sass so haben wir Zugang zu Mixins in Verbindung und Variablen, die helfen, die Konsistenz, aber ich konnte sehen, wie es könnte ein Abrutschen in die gefährliche zu-viele-Sonder-Gebiet.

Und doch, wären Sie Einweg-one-offs. Code-teilbare one-offs. Alles, was existiert im Gleichgewicht.

Laura geht auf zu sagen, dass Sie gerne CSS-in-JS-Ansätze für einige der Leistungsfähigkeit und Flexibilität, die es bietet:

Ich mag die Art, CSS-in-JS bietet genug Abstraktion, um noch tricks wie blind owl-Selektoren, während auch geben Ihnen die volle power mit JS zu tun Sachen wie container Abfragen.

Martin Hofmann eine Seite erstellt, Vergleich BEM vs. Emotion, die sieht ein wenig “Alarm” – Komponente. Ich mag, wie es ist eine emotionslose (wörtlich, nicht das verweisen auf die Bibliothek) Vergleich, der schaut auf syntax. BEM hat einige Vorteile, vor allem, erfordern keine Werkzeuge und ist leicht teilbar zu jedem web-Projekt. Aber die Emotion Ansatz ist sauberer in vielerlei Hinsicht und sieht einfacher zu handhaben.

Ich würde gerne mehr sehen, emotionslos Vergleiche der Technologien. Wahl Eines tut diese drei Dinge gut, aber ist schmerzhaft, hier und hier, während der Wahl B macht diese anderen Dinge gut und löst ein paar andere Schwachstellen.

Wir recentlylinked bis Scott Jehl ‘ s post sieht in dem laden CSS asynchron. Scott ‘ s opening line:

Eines der am meisten wirkungsvolle Dinge, die wir tun können, um die Seiten-performance verbessert und die Widerstandskraft ist zum laden von CSS in einer Weise, die nicht verzögert Seitenaufbau.

Es ist bemerkenswert, dass ein all-in-CSS-in-JS-Ansatz wird diese Fähigkeit natürlich, wie styling ist gebündelt in JavaScript. Es ist gebündelt zu einem Preis. Die Kosten für die Leistung. Aber wir bekommen einige, dass die Kosten zurück, wenn wir die Beseitigung anderen render-blocking Dinge. Das ist Interessantes Zeug verdient mehr Daten, mindestens.

Ich könnte meinen Hintern treten dafür, aber ich bin ein wenig weniger daran interessiert, die Gespräche, die versuchen, die Schuld von CSS-in-JS für die Anhebung der Hürde für den Eintritt in die Industrie. Das ist eine riesige Sache zu prüfen, aber wir reden nicht über das Herunterfahren CSS hier und zwingen jeden zu einer anderen Sprache. Wir reden über Nischen-Bibliotheken für bestimmte Arten von Projekten, die an bestimmten Maßstäben.

Ich denke, es lohnt sich, einen Blick auf die CSS-in-JS-Ideen, wenn…

  • Sie arbeiten an einer Komponente-schwere JavaScript-Projekt sowieso.
  • Du bist bereits co-Lokalisierung Vorlagen, Funktionen und Daten Abfragen.
  • Sie denken, die Sie nutzen können es ohne Schaden für user experience, wie mit Zunehmender Geschwindigkeit wieder an anderer Stelle.
  • Ihr team wird wohl mit der erforderlichen tech, wie in, Sie sind nicht wegdrücken talent.

Max Stoiber ist ein purer fan, aber sein post auf das Thema, spricht über das Vertrauen dieser Stil bringt ihn und die Zeit, die er spart zu finden, was er braucht, beides Dinge, die ich gefunden habe, um wahr zu sein. Aber er denkt auch, der Ansatz ist spezifisch für JavaScript-framework-apps.

Wenn Sie ein JavaScript-framework zum entwickeln einer web-app mit Komponenten, CSS-in-JS ist wahrscheinlich eine gute Passform. Vor allem, wenn Sie Teil eines Teams, in dem jeder versteht, basic, JavaScript.

Ich würde gerne hören, y ‘ all die Gedanken dazu in die Kommentare. Sie arbeitete heraus, Ihre Gefühle auf all dies? Madly in love? Schäumend vor Abneigung? Ich würde mich am meisten interessiert, Erfolg-Geschichten oder-Ausfall Geschichten, die auf realen Projekten.