Kostenloser CSS-zu-JavaScript-Konverter

So funktioniert es

Dieses Tool parst CSS-Eigenschaften und konvertiert sie in JavaScript-Objekt-Syntax. Eigenschaftsnamen in Kebab-Case (etwa background-color) werden automatisch in CamelCase (backgroundColor) umgewandelt. CSS-Werte werden unverändert übernommen. Sie können einzelne Eigenschaften oder eine vollständige CSS-Regel mit Selektoren eingeben.

Die CSS-in-JS-Bewegung, kurzgefasst

Warum existiert dieses Konvertierungsproblem überhaupt? Weil 2014 eine Generation von Frontend-Entwicklern entschied, dass CSS in separaten Stylesheets im großen Maßstab gescheitert war. Der Gründungsmoment war Christopher „Vjeux“ Chedeaus Vortrag „CSS in JS“ auf der NationJS am 15. November 2014: ein Facebook-Ingenieur, der argumentierte, dass CSS' globale Kaskade, fehlende Abhängigkeitsverfolgung und Akkumulation von totem Code es zum schlimmsten Teil großer Web-Apps machten. Der Vortrag entzündete eine Bewegung. JSS (Oleg Slobodskoi) lieferte Ende 2014 als erste Allzweck-CSS-in-JS-Bibliothek. CSS Modules kam 2015 als Build-Time-Ansatz für Scoping. styled-components (Glen Maddern + Max Stoiber) lieferte im Oktober 2016 und popularisierte die Tagged-Template-Literal-API, bei der man CSS innerhalb von Backticks schreibt, die an eine Komponentendefinition angehängt sind. Emotion (Kye Hohenberger) lieferte am 10. Juli 2017 sowohl mit der styled-components-Style-API als auch mit einem flexibleren css-Prop, der JavaScript-Objekte direkt nahm, genau das Format, das dieses Tool produziert. Stitches (Modulz/Pedro Duarte) lieferte 2020 mit einer Variant-basierten API, wurde aber Mitte 2023 unmaintained und im April 2026 formell archiviert.

Das Pendel ist zurückgeschwungen. Sam Maguras „Why We're Breaking Up with CSS-in-JS“ am 16. Oktober 2022 (geschrieben von einem Emotion-Maintainer) war der Wendepunkt. Das technische Argument: Runtime-CSS-in-JS verlangsamt React-Renders messbar (Maguras eigener Benchmark am Spot Member Browser senkte die Median-Render-Zeit von 54,3 ms auf 27,7 ms nach der Migration weg von Emotion, also rund 2× schneller); Bundle-Größen sind größer; Serialisierungskosten akkumulieren sich. Das architektonische Argument: React Server Components (durch Next.js 13.4 am 4. Mai 2023 stabilisiert) können React Context nicht verwenden, von dem die meisten CSS-in-JS-Bibliotheken für Theming abhängen. Die Ersatz-welle: Tailwind CSS (Adam Wathan, mit dem v4-Launch am 22. Januar 2025); Vanilla Extract (Mark Dalgleish bei Seek, 26. März 2021) für Build-Time-CSS-in-TypeScript; CSS Modules für gescopete Klassennamen ohne Runtime-Kosten; und die im Magura-Post selbst genannte überlebende Compile-zu-Statisch-Riege: vanilla-extract, Linaria, Compiled, StyleX und Pigment CSS. JSS selbst wurde am 14. Mai 2024 deprecated; styled-components ging am 17. März 2025 in den Wartungsmodus. Runtime-CSS-in-JS ist 2026 nicht mehr der Default für neue React-Projekte, aber eine gigantische Codebasis bestehender styled-components- und Emotion-Code besteht weiter, und CSS in die Objektform dieser Bibliotheken zu konvertieren ist immer noch die tägliche Realität für viele Teams.

Die API-Oberflächen der wichtigsten Bibliotheken

React-Inline-Style (das style-Prop) ist die universelle Baseline, jede React-Komponente akzeptiert ein style-Objekt, dessen Schlüssel camelCase-CSS-Eigenschaften sind. Keine Unterstützung für Pseudo-Klassen (:hover), Media Queries oder !important; das ist „inline style“ im Sinne des alten HTML-style="..."-Attributs, nur mit einem JavaScript-Objekt statt einer Zeichenkette. Die Ausgabe dieses Tools fällt direkt in style={...}. styled-components nimmt Tagged Template Literals, die echte CSS-Strings enthalten: const Button = styled.div`background: red; padding: 10px;`. Das CSS ist echtes CSS, kebab-case und alles, du brauchst diesen Konverter normalerweise nicht für styled-components, es sei denn, du wechselst von Inline-Styles zu einer Styled-Komponente. Emotion unterstützt beide APIs: die Styled-API (Template Literals wie styled-components) und das css-Prop mit einem JavaScript-Objekt (camelCase, genau das Format, das dieses Tool produziert). Für Emotions css-Prop ist die Ausgabe dieses Konverters direkt verwendbar. JSS verwendet ein ähnliches Objektformat mit einigen zusätzlichen Features (Theming, automatisch generierte Klassennamen), aber die grundlegende camelCase-Eigenschaftssyntax ist dieselbe. Vues Style-Bindung (:style="...") akzeptiert dieselbe camelCase-Objektsyntax wie React's Inline-Style. Vanilla Extract verwendet eine strenger typisierte Objektform mit expliziten style({ ... })-Wrapper-Funktionen; das innere camelCase-Objekt hat dieselbe Form.

Edge Cases und Stolperfallen

• Die Ausnahme des ms-Vendor-Präfixes. Die meisten Vendor-Präfixe werden nach camelCase großgeschrieben: -webkit-transform → WebkitTransform, -moz-appearance → MozAppearance, -o-transition → OTransition. Aber Microsofts Präfix ist die Ausnahme: -ms-flex → msFlex mit kleinem m, weil die React-DOM-Quelle es so definiert. Das ist die meistgegoogelte CSS-zu-JS-Stolperfalle.
• Einheitenlose Eigenschaften. React DOM pflegt eine Liste von Eigenschaften, bei denen nackte Zahlen gültig sind (z-index, opacity, line-height, flex-grow, flex-shrink, order, columns und mehrere andere). Für diese ist zIndex: 5 in Ordnung. Für alles andere brauchen dimensionale Werte Einheiten als Strings: width: '100px', nicht width: 100 (was React standardmäßig stillschweigend als '100px' behandelt, bequem, aber lossy, wenn du % oder vh wolltest).
• calc(), var() und CSS Custom Properties. Diese funktionieren als String-Werte: width: 'calc(100% - 20px)', color: 'var(--brand-color)'. Custom Properties (CSS-Variablen) brauchen Quoting um den --name: '--my-var': 'red'.
• !important funktioniert nicht in React-Inline-Styles. Das React-Style-Prop ignoriert !important-Annotations stillschweigend. Wenn du eine Regel höherer Spezifität überschreiben musst, verwende ein echtes Stylesheet (CSS Modules, Tailwind, styled-components), Inline-Styles sind nicht das richtige Werkzeug.
• Leerer-String-Inhalt. content: '' erfordert sorgfältiges Quoting in JavaScript: content: "''": ein leerer String-Wert, aber der Wert selbst ist ein CSS-Leerstring-Literal, der die umgebenden Apostrophe bewahrt braucht.
• Verschachtelte Regeln und Pseudo-Selektoren. Einfache CSS-zu-JS-Konvertierung produziert ein flaches Objekt, Hover-Zustände, Media Queries und Pseudo-Element-Styles brauchen die eigene Struktur der Zielbibliothek. Emotions css-Prop unterstützt verschachtelte Objekte ('&:hover': { background: 'red' }); React's Inline-Style nicht.
• Shorthand-Eigenschaften. margin: 10px 20px 10px 20px bleibt als String in JS-Form: margin: '10px 20px 10px 20px'. React erlaubt das Shorthand; einige CSS-in-JS-Bibliotheken warnen, dass es unerwartet mit Longhand-Varianten interagieren kann.

Häufige Anwendungsfälle

• React-Inline-Styles. CSS-Snippets von einem Designer oder Stylesheet in das Objekt-Format style={...} für Komponenten zu konvertieren, die kein zugeordnetes Stylesheet haben.
• Emotion-css-Prop. Migration von einer separaten CSS-Datei zu Emotions Objekt-Syntax-css-Prop, wo camelCase + JS-Objektform der native Input ist.
• JavaScript-Animationen. GSAP, anime.js, Motion One und Framer Motion akzeptieren alle Style-Objekte als Keyframe-Ziele. Das camelCase-Format ist auch dort erforderlich.
• Design-System-Tokens. CSS-Custom-Property-Werte in JavaScript-Konstanten zu konvertieren, um sie in Design-Token-Systemen (Style Dictionary, Theo etc.) zu verwenden, in denen TypeScript oder JS die kanonische Quelle der Wahrheit ist.
• JSS-Migration. Material UI v4 und früher verwendeten JSS stark; CSS-Prototypen in JSS-Objektform zu konvertieren ist der Reibungspunkt. Beachte, dass Material UI v5+ standardmäßig zu Emotion gewechselt hat; das ist eher ein Legacy-Anwendungsfall.
• Vue-Inline-Style-Bindung. :style="{...}" in Vue-Templates verwendet dasselbe camelCase-Objektformat wie React's Style-Prop; die Ausgabe dieses Konverters ist auch in Vue-Templates direkt verwendbar.

Ehrlicher Umfang: Was dieses Tool macht und nicht macht

Dieses Tool konvertiert CSS-Deklarationen in JavaScript-Objektsyntax mit camelCase-Schlüsseln und korrekt gequoteten String-Werten. Es handhabt die Vendor-Präfix-Großschreibungsregeln (einschließlich der kleingeschriebenen ms-Ausnahme). Es übersetzt nicht in die API einer bestimmten Bibliothek über das Produzieren des camelCase-Objekts hinaus, du musst immer noch wissen, ob deine Codebasis das Objekt innerhalb von styled.div`...`, innerhalb eines Emotion-css-Aufrufs, innerhalb eines React-style-Props oder innerhalb einer Vue-:style-Bindung haben will. Die Wahl hängt von deiner Bibliothek ab, nicht vom Konverter. Das Tool handhabt auch nicht automatisch verschachtelte Regeln und Pseudo-Selektoren, Emotions verschachtelte-Objekt-Syntax ('&:hover': {...}) und styled-components' Template-Literal-Verschachtelung funktionieren unterschiedlich und brauchen manuelles Strukturieren. Für eine vollständige Migration von einer CSS-Datei zu einer CSS-in-JS-Bibliothek erwarte etwas Restrukturierung über die Eigenschaft-für-Eigenschaft-Konvertierung hinaus, die dieses Tool bietet.

Datenschutz: warum nur-Browser hier zählt

CSS enthält selten Geheimnisse, aber proprietäre Stylesheets enthüllen Informationen über die interne Klassentaxonomie einer Site, ihre Design-System-Tokens und manchmal ihre A/B-Test-Hypothese durch experiment-spezifische Selektoren. Serverseitige Konvertierungswerkzeuge erfordern das Hochladen des CSS, das in deren Logs sitzt. Für interne Produkt-Styles, Design-System-Source-of-Truth-Dateien oder in-Arbeit befindliches Branding hält die nur-Browser-Konvertierung es lokal. Dieses Tool führt die gesamte Transformation in deinem Browser aus, überprüfe es im Network-Tab der DevTools, während du auf Konvertieren klickst, oder nimm die Seite offline (Flugmodus) und der Konverter funktioniert weiter.

Häufig gestellte Fragen

Wie werden CSS-Eigenschaften in camelCase konvertiert?

Jeder Bindestrich in einer kebab-case-CSS-Eigenschaft wird entfernt und der nächste Buchstabe großgeschrieben: background-color → backgroundColor, border-radius → borderRadius, margin-top → marginTop. Vendor-präfixierte Eigenschaften folgen derselben Regel mit Großschreibung: -webkit-transform → WebkitTransform (großes W), -moz-appearance → MozAppearance. Die berühmte Ausnahme ist Microsofts Präfix: -ms-flex → msFlex mit kleinem m, weil React DOM es so definiert.

Funktioniert das für Media Queries und Pseudo-Klassen?

Einfache JavaScript-Style-Objekte (das React-style-Prop, Vue-:style) unterstützen keine Media Queries oder Pseudo-Klassen, das sind Stylesheet-Konzepte. CSS-in-JS-Bibliotheken, die Objekt-Syntax akzeptieren (Emotions css-Prop, JSS), unterstützen sie durch verschachtelte Objekte: '&:hover': { background: 'red' }, '@media (min-width: 768px)': { padding: '20px' }. Die Dokumentation der Zielbibliothek zeigt die genaue Verschachtelungsstruktur. Dieses Tool produziert das flache Objekt; du wickelst es manuell in die Verschachtelungssyntax der Bibliothek.

Warum funktioniert !important nicht in React-Inline-Styles?

Das React-style-Prop ignoriert stillschweigend !important-Annotations, sie sind nicht Teil der JS-Objektliteral-Grammatik und Reacts Renderer übersetzt sie nicht. Wenn du eine Regel höherer Spezifität überschreiben musst, verwende ein echtes Stylesheet (CSS Modules, Tailwind, styled-components, einfaches CSS). Reacts Inline-Style-Mechanismus ist für einmalige oder dynamische Styles, bei denen Spezifität keine Sorge ist; !important gehört in ein Stylesheet.

Sollte ich 2026 noch CSS-in-JS verwenden?

Für neue React-Projekte ist der aktuelle Default „nein, verwende Tailwind, CSS Modules oder Vanilla Extract.“ Sam Maguras Artikel vom Oktober 2022 aus dem Inneren des Emotion-Teams (kombiniert mit der Context-Inkompatibilität von React Server Components) drängte das Ökosystem zu Build-Time-only-Lösungen. styled-components ging am 17. März 2025 in den Wartungsmodus; JSS wurde am 14. Mai 2024 deprecated. Für bestehende Codebasen mit signifikanter styled-components- oder Emotion-Investition kein Eile zur Migration, beide Bibliotheken funktionieren immer noch, und die Runtime-Kosten sind die Art von Sache, die du optimierst, wenn sie im Profiling auftaucht. Für ein brandneues Projekt 2026: Tailwind v4 (am 22. Januar 2025 veröffentlicht) ist die populärste Wahl; Vanilla Extract für Projekte, die strikte TypeScript-Typisierung auf Styles wollen; CSS Modules für Projekte, die minimale Abstraktion wollen.

Kann ich Design-System-Tokens auf diese Weise konvertieren?

Für ein einmaliges Snippet, ja. Für ein ganzes Design-System (typischerweise Dutzende oder Hunderte von Tokens, organisiert nach Farbe, Abstand, Typografie, Bewegung) verwende ein spezialisiertes Werkzeug wie Style Dictionary oder Theo, die beide eine einzige Quelle der Wahrheit (JSON, YAML oder JS) nehmen und an mehrere Ziele ausgeben (CSS Custom Properties, JS-Konstanten, iOS Asset Catalogs, Android XML etc.). Der Vorteil eines echten Design-Token-Werkzeugs ist Konsistenz über Plattformen hinweg; dieser Konverter ist für den Fall, dass du ein CSS-Snippet zur Hand hast und jetzt JS-Form willst.

Wird mein CSS irgendwohin gesendet?

Nein. Die Konvertierung läuft vollständig in deinem Browser über JavaScript. Das CSS, das du einfügst, überquert nie das Netzwerk, überprüfe es im Network-Tab der DevTools, während du auf Konvertieren klickst, oder nimm die Seite nach dem Laden offline und bestätige, dass das Werkzeug noch funktioniert. Sicher für proprietäre Stylesheets, Design-System-Source-of-Truth-Dateien oder jedes CSS, das interne Klassentaxonomien preisgibt, die du nicht auf der Festplatte eines Fremden kopiert haben möchtest.

Verwandte Tools