Convertitore gratuito da CSS a JavaScript

Come usare

Questo strumento analizza le proprietà CSS e le converte in sintassi di oggetto JavaScript. I nomi di proprietà in kebab-case (come background-color) vengono automaticamente convertiti in camelCase (backgroundColor). I valori CSS sono preservati come tali. Puoi inserire proprietà individuali o una regola CSS completa con selettori.

Il movimento CSS-in-JS, in breve

Perché esiste questo problema di conversione? Perché nel 2014 una generazione di sviluppatori frontend decise che il CSS in fogli di stile separati aveva fallito su larga scala. Il momento fondante fu il talk di Christopher "Vjeux" Chedeau "CSS in JS" al NationJS il 15 novembre 2014: un ingegnere di Facebook che sosteneva che la cascade globale del CSS, la mancanza di tracciamento delle dipendenze e l'accumulo di codice morto rendevano il CSS la parte peggiore delle grandi web app. Il talk accese un movimento. JSS (Oleg Slobodskoi) uscì alla fine del 2014 come prima libreria CSS-in-JS general-purpose. CSS Modules arrivò nel 2015 come approccio in fase di build alla scoping. styled-components (Glen Maddern + Max Stoiber) uscì nell'ottobre 2016, popolarizzando l'API tagged-template-literal in cui scrivi CSS dentro backtick attaccati a una definizione di componente. Emotion (Kye Hohenberger) uscì il 10 luglio 2017 sia con l'API in stile styled-components sia con una css prop più flessibile che accettava direttamente oggetti JavaScript: esattamente il formato che produce questo strumento. Stitches (Modulz/Pedro Duarte) uscì nel 2020 con un'API basata su varianti ma divenne non manutenuto a metà 2023 e fu formalmente archiviato nell'aprile 2026.

Il pendolo è oscillato di nuovo. "Why We're Breaking Up with CSS-in-JS" di Sam Magura il 16 ottobre 2022, scritto da un manutentore di Emotion, fu il punto di svolta. La tesi tecnica: il CSS-in-JS a runtime rallenta misurabilmente i render di React (il benchmark di Magura sullo Spot Member Browser ha portato il tempo mediano di render da 54,3 ms a 27,7 ms dopo la migrazione da Emotion, circa 2× più veloce); le dimensioni del bundle sono maggiori; i costi di serializzazione si accumulano. La tesi architetturale: i React Server Components (stabilizzati da Next.js 13.4 il 4 maggio 2023) non possono usare React Context, da cui dipende la maggior parte delle librerie CSS-in-JS per il theming. L'ondata sostitutiva: Tailwind CSS (Adam Wathan, lancio v4 il 22 gennaio 2025); Vanilla Extract (Mark Dalgleish a Seek, 26 marzo 2021) per CSS-in-TypeScript in fase di build; CSS Modules per nomi di classe scoped senza costo a runtime; e il gruppo compile-to-static sopravvissuto nominato nel post stesso di Magura: vanilla-extract, Linaria, Compiled, StyleX e Pigment CSS. JSS stesso fu dichiarato deprecato il 14 maggio 2024; styled-components è entrato in modalità di manutenzione il 17 marzo 2025. Il CSS-in-JS a runtime non è più il default per i nuovi progetti React nel 2026, ma una codebase gigantesca di codice styled-components ed Emotion esistente persiste, e convertire CSS nella forma a oggetti di quelle librerie è ancora la realtà quotidiana per molti team.

Le superfici delle API delle librerie principali

Lo style inline di React (la prop style) è il riferimento universale: ogni componente React accetta un oggetto style le cui chiavi sono proprietà CSS in camelCase. Nessun supporto per pseudo-classi (:hover), media query o !important; questo è "inline style" nel vecchio senso dell'attributo HTML style="...", solo con un oggetto JavaScript invece di una stringa. L'output di questo strumento si infila direttamente in style={...}. styled-components usa tagged template literal contenenti vere stringhe CSS: const Button = styled.div`background: red; padding: 10px;`. Il CSS è vero CSS, kebab-case e tutto: di solito non hai bisogno di questo convertitore per styled-components a meno che tu non stia migrando da inline style a un componente styled. Emotion supporta entrambe le API: l'API styled (template literal come styled-components) e la css prop con un oggetto JavaScript (camelCase, esattamente il formato che produce questo strumento). Per la css prop di Emotion, l'output di questo convertitore è direttamente utilizzabile. JSS usa un formato a oggetto simile con alcune funzionalità aggiuntive (theming, nomi di classe generati automaticamente) ma la sintassi base delle proprietà in camelCase è la stessa. Lo style binding di Vue (:style="...") accetta la stessa sintassi a oggetto camelCase dello style inline di React. Vanilla Extract usa una forma a oggetto tipata più stretta con funzioni esplicite di wrapping style({ ... }); l'oggetto camelCase interno ha la stessa forma.

Casi limite e trabocchetti

• L'eccezione del prefisso vendor ms. La maggior parte dei prefissi vendor capitalizza dopo il camelCase: -webkit-transform → WebkitTransform, -moz-appearance → MozAppearance, -o-transition → OTransition. Ma il prefisso di Microsoft è l'eccezione: -ms-flex → msFlex con una m minuscola, perché è così che la sorgente di React DOM lo definisce. È il singolo trabocchetto CSS-to-JS più cercato su Google.
• Proprietà senza unità. React DOM mantiene un elenco di proprietà in cui i numeri nudi sono validi (z-index, opacity, line-height, flex-grow, flex-shrink, order, columns e diverse altre). Per queste, zIndex: 5 va bene. Per tutto il resto, i valori dimensionali hanno bisogno di unità come stringhe: width: '100px', non width: 100 (che React tratterà come '100px' per default silenzioso: comodo ma con perdita se volevi % o vh).
• calc(), var() e proprietà custom CSS. Funzionano come valori stringa: width: 'calc(100% - 20px)', color: 'var(--brand-color)'. Le proprietà custom (variabili CSS) hanno bisogno di virgolettatura attorno al --name: '--my-var': 'red'.
• !important non funziona negli style inline di React. La prop style di React ignora silenziosamente le annotazioni !important. Se hai bisogno di sovrascrivere una regola con specificità più alta, usa un vero foglio di stile (CSS Modules, Tailwind, styled-components): gli style inline non sono lo strumento giusto.
• Stringa content vuota. content: '' richiede una virgolettatura attenta in JavaScript: content: "''": un valore stringa vuota, ma il valore stesso è una stringa vuota CSS letterale che ha bisogno che gli apostrofi circostanti siano preservati.
• Regole annidate e pseudo-selettori. La conversione semplice CSS-to-JS produce un oggetto piatto: gli stati hover, le media query e gli stili degli pseudo-elementi hanno bisogno della struttura propria della libreria di destinazione. La css prop di Emotion supporta oggetti annidati ('&:hover': { background: 'red' }); lo style inline di React no.
• Proprietà shorthand. margin: 10px 20px 10px 20px resta una stringa nella forma JS: margin: '10px 20px 10px 20px'. React permette lo shorthand; alcune librerie CSS-in-JS avvisano che può interagire in modo inatteso con varianti longhand.

Casi d'uso comuni

• Style inline di React. Convertire snippet CSS da un designer o da un foglio di stile nel formato a oggetto style={...} per componenti che non hanno un foglio di stile associato.
• css prop di Emotion. Migrare da un file CSS separato alla css prop a sintassi oggetto di Emotion, dove camelCase + forma JS-object è l'input nativo.
• Animazioni JavaScript. GSAP, anime.js, Motion One e Framer Motion accettano tutti oggetti style come target di keyframe. Il formato camelCase è richiesto anche lì.
• Token di design system. Convertire i valori delle proprietà custom CSS in costanti JavaScript per l'uso nei sistemi di design token (Style Dictionary, Theo, ecc.) dove TypeScript o JS è la fonte canonica di verità.
• Migrazione JSS. Material UI v4 e precedenti usavano JSS pesantemente; convertire prototipi CSS nella forma a oggetto JSS è il punto di attrito. Nota che Material UI v5+ è passato a Emotion di default; questo è più un caso d'uso legacy.
• Style binding inline di Vue. :style="{...}" nei template Vue usa lo stesso formato a oggetto camelCase della style prop di React; l'output di questo convertitore è direttamente utilizzabile anche nei template Vue.

Ambito onesto: cosa fa e non fa questo strumento

Questo strumento converte le dichiarazioni CSS in sintassi a oggetto JavaScript con chiavi camelCase e valori stringa correttamente virgolettati. Gestisce le regole di capitalizzazione dei prefissi vendor (inclusa l'eccezione minuscola ms). Non traduce all'API di una libreria specifica oltre a produrre l'oggetto camelCase: devi comunque sapere se la tua codebase vuole l'oggetto dentro styled.div`...`, dentro una chiamata css di Emotion, dentro una prop style di React o dentro un binding :style di Vue. La scelta dipende dalla tua libreria, non dal convertitore. Lo strumento non gestisce automaticamente regole annidate e pseudo-selettori: la sintassi a oggetto annidato di Emotion ('&:hover': {...}) e l'annidamento template-literal di styled-components funzionano in modo diverso e hanno bisogno di strutturazione manuale. Per una migrazione completa da un file CSS a una libreria CSS-in-JS, aspettati di fare qualche ristrutturazione oltre alla conversione proprietà-per-proprietà che questo strumento fornisce.

Privacy: perché solo browser conta qui

Il CSS contiene raramente segreti, ma i fogli di stile proprietari rivelano informazioni sulla tassonomia interna delle classi di un sito, sui suoi token di design system e a volte sulla sua ipotesi di test A/B attraverso selettori specifici dell'esperimento. Gli strumenti di conversione lato server richiedono il caricamento del CSS, che resta nei loro log. Per stili di prodotto interno, file di verità del design system o branding work-in-progress, la conversione solo browser lo tiene locale. Questo strumento esegue l'intera trasformazione nel tuo browser: verifica nel pannello Network di DevTools mentre clicchi Converti, oppure metti la pagina offline (modalità aereo) e il convertitore continua a funzionare.

Domande frequenti

Come vengono convertite le proprietà CSS in camelCase?

Ogni trattino in una proprietà CSS kebab-case viene rimosso e la lettera successiva viene maiuscola: background-color → backgroundColor, border-radius → borderRadius, margin-top → marginTop. Le proprietà con prefisso vendor seguono la stessa regola con la maiuscolizzazione: -webkit-transform → WebkitTransform (W maiuscola), -moz-appearance → MozAppearance. La famosa eccezione è il prefisso di Microsoft: -ms-flex → msFlex con una m minuscola, perché è così che React DOM lo definisce.

Funziona per media query e pseudo-classi?

Gli oggetti style JavaScript semplici (la style prop di React, :style di Vue) non supportano media query o pseudo-classi: quelli sono concetti dei fogli di stile. Le librerie CSS-in-JS che accettano sintassi a oggetto (la css prop di Emotion, JSS) le supportano attraverso oggetti annidati: '&:hover': { background: 'red' }, '@media (min-width: 768px)': { padding: '20px' }. La documentazione della libreria di destinazione mostrerà la struttura esatta di annidamento. Questo strumento produce l'oggetto piatto; lo avvolgi nella sintassi di annidamento della libreria manualmente.

Perché !important non funziona negli style inline di React?

La style prop di React ignora silenziosamente le annotazioni !important: non fanno parte della grammatica del literal a oggetto JS e il renderer di React non le traduce. Se hai bisogno di sovrascrivere una regola con specificità più alta, usa un vero foglio di stile (CSS Modules, Tailwind, styled-components, CSS puro). Il meccanismo dello style inline di React è per stili una tantum o dinamici dove la specificità non è una preoccupazione; !important appartiene a un foglio di stile.

Dovrei ancora usare CSS-in-JS nel 2026?

Per nuovi progetti React, il default attuale è "no, usa Tailwind, CSS Modules o Vanilla Extract." L'articolo dell'ottobre 2022 di Sam Magura dall'interno del team Emotion, combinato con l'incompatibilità di React Server Components con Context, ha spinto l'ecosistema verso soluzioni solo-build-time. styled-components è passato in modalità di manutenzione il 17 marzo 2025; JSS è stato dichiarato deprecato il 14 maggio 2024. Per codebase esistenti con un investimento significativo in styled-components o Emotion, nessuna fretta di migrare: entrambe le librerie funzionano ancora, e il costo a runtime è il tipo di cosa che ottimizzi quando si presenta nel profiling. Per un progetto nuovo di zecca nel 2026: Tailwind v4 (rilasciato il 22 gennaio 2025) è la scelta più popolare; Vanilla Extract per progetti che vogliono una tipizzazione TypeScript stretta sugli stili; CSS Modules per progetti che vogliono un'astrazione minima.

Posso convertire i token di design system in questo modo?

Per uno snippet una tantum, sì. Per un intero design system (tipicamente decine o centinaia di token organizzati per colore, spaziatura, tipografia, motion), usa uno strumento dedicato come Style Dictionary o Theo, entrambi i quali prendono una singola fonte di verità (JSON, YAML o JS) e producono output verso più destinazioni (proprietà custom CSS, costanti JS, Asset Catalogs iOS, XML Android, ecc.). Il vantaggio di un vero strumento per design token è la coerenza tra le piattaforme; questo convertitore è per il caso in cui hai uno snippet CSS in mano e vuoi la forma JS subito.

Il mio CSS viene inviato da qualche parte?

No. La conversione gira interamente nel tuo browser tramite JavaScript. Il CSS che incolli non attraversa mai la rete: verifica nel pannello Network di DevTools mentre clicchi Converti, oppure metti la pagina offline dopo che si è caricata e conferma che lo strumento continui a funzionare. Sicuro per fogli di stile proprietari, file di verità di design system, o qualsiasi CSS che riveli tassonomie di classi interne che non vorresti vedere copiate sul disco di uno sconosciuto.

Strumenti correlati