StyleX - Das neue skalierbare CSS Framework von Meta

Mit React hat Facebook (heute Meta) schon einmal ein Framework geschaffen, welches die Entwicklung von Webanwendungen revolutioniert hat. Mit StyleX hat Meta nun ein neues Framework geschaffen, welches die Entwicklung von Webanwendungen in Bezug auf das Styling mit CSS vereinfachen soll. Welche Vor- und Nachteile es gegenüber anderen CSS Frameworks gibt, erfahren Sie in diesem Blog Eintrag.

Warum ein neues CSS Framework?

In den letzten Jahren hat vor allem ein CSS Framework große Beliebtheit erlangt - Die Sprache ist natürlich von Tailwind. Seit der ersten Veröffentlichung von Tailwind 2017 hat sich das Framework eine große Community aufgebaut und wird heute von vielen Entwicklern weltweit verwendet. Doch warum hat Meta nun ein neues Framework entwickelt, wenn es doch schon ein so erfolgreiches Framework gibt?

Mit Anwendungen wie Facebook, Instagram und Co. bietet Meta verschiedenste Dienste an, welche aufgrund Ihrer Größe und Komplexität Probleme aufwerfen, welche es in kleinen und mittleren Anwendungen so nicht gibt. Um die Entwicklung dieser Anwendungen zu vereinfachen, hat Meta nun ein eigenes Framework entwickelt, welches die Entwicklung von Webanwendungen vor allem mit React vereinfachen soll. Der Fokus von StyleX scheint somit vor allem auf der Skalierbarkeit zu liegen, heißt auch in sehr komplexen Anwendungen und Designsystemen eine konsistente und einfache Entwicklung zu ermöglichen.

Ein Beispiel mit StyleX

Um zu verstehen, wie StyleX funktioniert, wollen wir uns zunächst ein einfaches Beispiel anschauen. Anhand dieses Beispiels wird schnell klar, wo der grundlegende Unterschied zum aktuell sehr beliebten Tailwind liegt. Hier ein einfaches Beispiel für einen Button mit StyleX:

import * as stylex from "@stylexjs/stylex"

const styles = stylex.create({
  base: {
    borderStyle: "none",
    backgroundColor: "blue",
    color: "white",
    fontWeight: "bold",
    borderRadius: 4,
    paddingBlock: 4,
    paddingInline: 8,
  },
})

export default function Button({ onClick }) {
  return (
    <button {...stylex.props(styles.base)} onClick={onClick}>
      Speichern
    </button>
  )
}

Mit StyleX wird das Styling durch die stylex.create Funktion vorab definiert und anschließend auf das Element mit Hilfe der stylex.props Funktion angewendet. Im Vergleich dazu ein Beispiel für einen Button mit Tailwind:

export default function Button({ onClick }) {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={onClick}>
      Speichern
    </button>
  )
}

Der Unterschied wird schnell klar… während man mit Tailwind das Styling direkt auf dem Element definiert, wird das Styling mit StyleX vorab definiert und anschließend auf das Element angewendet. Doch was sind die Vor- und Nachteile dieser beiden Ansätze?

Vor- und Nachteile von StyleX

Auch wenn die beiden Systeme einen sehr unterschiedlichen Ansatz verfolgen, sind sie doch beide sehr mächtig und können gleichermaßen für die Entwicklung von Webanwendungen verwendet werden. Im Detail haben aber beide Lösungen Ihre Vor- und Nachteile.

Vorteile von StyleX

Der größte Vorteil von StyleX ist die Skalierbarkeit. Durch die Definition der Styles vorab, können diese in der gesamten Anwendung verwendet werden. Gerade in Bezug auf die Entwicklung von Webanwendungen, welche in der Regel komponentenbasiert funktioniert, ist das aber noch keine Besonderheit. Auch mit Tailwind oder ganz klassischen CSS/SCSS können Komponenten entwickelt werden, welche in der gesamten Anwendung wiederverwendet werden und somit ein konsistentes Design ermöglichen.

Gerade in komplexen Webanwendungen kann die Umsetzung eines kosistenten Designs mit Hilfe von Komponenten trotzdem zur Herausforderung werden. Hier beginnen die Vorteile von StyleX, denn einheitliche Komponenten können zwar häufig eins zu eins wiederverwendet werden, umso größer die Anwendung wird desto mehr Abweichungen wird es geben. Diese Abweichungen können mit StyleX sehr einfach umgesetzt werden, da die grundlegenden Styles für die Komponenten vorab definiert, Abweichungen aber sehr einfach zusätzlich beigefügt werden können. Hier ein Beispiel:

export default function Button({ onClick, additionalClasses }) {
  return (
    <button {...stylex.props(styles.base, additionalClasses)} onClick={onClick}>
      Speichern
    </button>
  )
}

In dem Beispiel ist zu sehen, wie ein zusätzlicher Prop additionalClasses hinzugefügt wurde, welcher zusätzliche Styles auf das Element anwendet. Die stylex.props Funktion ermöglicht es, beliebig viele Styles auf ein Element anzuwenden und grundlegende Styles so zu überschreiben. Während man mit Tailwind die Styles händisch auf das Element anwenden muss und zusätzliche oder überschreibende Klassen durch String Verkettung zusammenfügen muss und Duplikate ggf. herausfiltert, wird diese Arbeit hier vom Framework übernommen.

Nachteile von StyleX

Wie unter Ein Beispiel mit StyleX zu sehen, bringt StyleX einigen Overhead mit sich. Das Tailwind Beispiel wirkt auf den ersten Blick deutlich aufgeräumter und übersichtlicher. Gerade in kleinen und mittleren Anwendungen, welche nicht so komplex sind, kann dieser Overhead schnell störend wirken. Auch wenn StyleX die Entwicklung von Webanwendungen in Bezug auf das Styling vereinfachen soll, ist es doch ein zusätzliches Framework, welches gelernt und verstanden werden muss. Aber auch Tailwind kann zu extremer Unübersichtlichkeit aufgrund der vielen und langen Klassen-Definitionen führen. Am Ende ist dies wahrscheinlich eine Geschmacksfrage.

Ein weiterer Nachteil ist, dass StyleX gegenüber Tailwind keine vordefinierten Styles mitbringt. Gerade für kleine und mittlere Projekte, welche in der Regel kein allumfassendes Designsystem haben, kann dies ein Nachteil sein. Tailwind bringt hier eine Vielzahl an vordefinierten Farben, Schriftgrößen, Abständen und vielem mehr mit, welche direkt verwendet werden können. Mit StyleX muss das Designsystem also erst definiert werden, was gerade bei kleinen Projekten unnötig erscheinen kann.

Fazit

StyleX ist ein vielversprechendes CSS Framework. Fraglich ist aber, ob es Tailwind von seinem aktuellen Thron als beliebtes CSS Framework stoßen wird. Gerade in kleinen und mittleren Projekten, welche nicht so komplex sind, kann der Overhead von StyleX schnell störend wirken. Durch die Nutzung des Frameworks von Meta selbst, ist aber klar was das Framework kann und welche Stärken es besitzt. Es bleibt abzuwarten, wie sich StyleX in den nächsten Jahren entwickeln wird und ob es sich gegen Tailwind durchsetzen kann.