Warum ich CSS in JavaScript schreibe

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ich werde Ihnen niemals sagen, dass das Schreiben Ihres CSS in CSS (oder einem beliebigen syntaktischen Präprozessor) eine schlechte Idee ist. Ich denke, Sie können auch ganz ohne Werkzeuge produktiv und performant sein. Aber ich denke auch, dass das Schreiben von CSS in JavaScript eine gute Idee ist, für komponentenbasierte Stile in Codebasen, die alle ihre Komponenten ohnehin mit JavaScript erstellen.

In diesem Artikel konzentriert sich Max Stoiber darauf, warum CSS in JavaScript geschrieben werden soll, anstatt wie es gemacht wird. Es gibt einen Grund, der mich besonders anspricht, und das ist Zuversicht. Das bedeutet für mich Styling-Zuversicht.

  • Jeder im Team kann an der Gestaltung einer Komponente arbeiten, ohne Angst vor unbeabsichtigten Nebenwirkungen zu haben.
  • Es gibt keinen Druck, perfekte Namen zu finden, die jetzt und für immer funktionieren werden.
  • Es gibt keine Sorge, dass die Stile extrem wiederverwendbar sein müssen oder dass sie mit allem anderen gut zurechtkommen. Diese Stile werden nur bei Bedarf und nicht zu anderen Zeiten verwendet.
  • Es gibt einen klaren Standard, wo Stile im Code platziert werden.
  • CSS in JavaScript ist nicht die einzige Antwort auf diese Dinge, aber wie Max auf andere Beiträge zu diesem Thema verweist, kann es zu Situationen führen, in denen gute Entscheidungen auf natürliche Weise getroffen werden.

    Es gibt einige Gründe, warum ich dem nicht zustimme. Performance ist einer davon, als ob die Wahl von CSS-in-JS ein automatischer Performance-Gewinn wäre. Ein Teil des Problems (und ich mache es hier auch richtig) ist, dass CSS-in-JS ein breites Spektrum an Lösungen umfasst. Ich habe im Allgemeinen festgestellt, dass es keine großen Performance-Gewinne bei CSS-in-JS gibt (eher das Gegenteil), aber das ist irrelevant, wenn wir über etwas wie CSS-Module sprechen, bei dem die Stile extrahiert und wie jedes andere CSS verknüpft werden.

    Direkter Link →