{"id":3931,"date":"2019-04-01T08:53:00","date_gmt":"2019-04-01T08:53:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/why-should-you-use-scss-instead-of-styled-components\/"},"modified":"2026-04-24T11:21:07","modified_gmt":"2026-04-24T11:21:07","slug":"perche-usare-gli-scss-invece-dei-componenti-stilizzati","status":"publish","type":"post","link":"https:\/\/thecodest.co\/it\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"Perch\u00e9 usare SCSS invece dei componenti con stile?"},"content":{"rendered":"<p>Dopo aver confrontato le soluzioni pi\u00f9 diffuse, come i semplici CSS, Emotion, <strong>SCSS <\/strong>e<strong> Componenti in stile<\/strong>Alla fine ho selezionato l'ultimo. Tutto sembrava andare bene. Ha una libreria molto popolare al giorno d'oggi, il che significa che<br>c'\u00e8 gi\u00e0 una grande comunit\u00e0, quindi se dovessi incontrare qualche problema, probabilmente troverei una soluzione da qualche parte su Stack Overflow o GitHub. Oltre a questo, <strong>Componenti in stile<\/strong> hanno alcune funzioni di ottimizzazione, il che significa che eseguono il rendering solo quando \u00e8 necessario. Il <a href=\"https:\/\/thecodest.co\/it\/dictionary\/why-do-projects-fail\/\">progetto<\/a> era previsto che venisse costruito utilizzando <a href=\"https:\/\/thecodest.co\/it\/blog\/conditional-component-visibility-in-react\/\">React<\/a> e <a href=\"https:\/\/thecodest.co\/it\/dictionary\/typescript-developer\/\">Dattiloscritto<\/a>. Questa libreria offre un ottimo supporto per entrambe le tecnologie. Sembra fantastico, vero?<\/p>\n\n\n\n<p>A quel punto ho iniziato a codificare. Dopo un mese, quando l'applicazione \u00e8 cresciuta, il front-end <a href=\"https:\/\/thecodest.co\/it\/blog\/best-practices-for-building-a-strong-and-cohesive-team\/\">squadra<\/a> e io ci siamo concentrati sulla fornitura di funzionalit\u00e0, abbiamo scoperto che l'incredibile <strong>Componenti in stile <\/strong>La biblioteca ha avuto un autogol e vi spiego perch\u00e9.<\/p>\n\n\n\n<p>Prima di tutto, la convenzione di denominazione. Per differenziare <strong>Componenti in stile<\/strong> da <a href=\"https:\/\/thecodest.co\/it\/blog\/react-development-all-you-have-to-know\/\">Componenti React<\/a>, ho dovuto usare l'opzione <code>Stile<\/code> prefisso che \u00e8 diminuito <a href=\"https:\/\/thecodest.co\/it\/dictionary\/what-is-code-refactoring\/\">codice<\/a> leggibilit\u00e0. E poi (cosa forse strana), il supporto di Typescript. <strong>Componenti in stile<\/strong>come forse sapete, si basano sull'approccio CSS-in-JS. Ci\u00f2 significa che \u00e8 possibile passare qualsiasi oggetto ad essi e cambiare lo stile, cio\u00e8 l'input, in base a questo oggetto e personalmente penso che questa caratteristica sia fantastica. In Typescript, si dovrebbe anche implementare il tipo di questo oggetto, in modo da rendere pi\u00f9 lungo il codice di ogni <strong>Componente stilizzato<\/strong>. \"Ma ci vorrebbero altri 5 secondi, quindi qual \u00e8 il problema?\", si potrebbe dire. Avete ragione, anche se quando l'applicazione scala velocemente e il numero di componenti \u00e8<br>aumentando, questi 5 secondi possono essere facilmente moltiplicati per centinaia di volte. Un altro problema \u00e8 il posizionamento del <strong>Componenti in stile<\/strong>.<\/p>\n\n\n\n<p>Alcuni <strong><a href=\"https:\/\/thecodest.co\/it\/blog\/hire-vue-js-developers\/\">JS<\/a> sviluppatori<\/strong> li inseriscono nello stesso file del componente a cui appartengono, mentre altri creano file separati per loro. Entrambi gli approcci sono validi per molte ragioni. Dipende soprattutto dalla complessit\u00e0 del componente. Seguendo una di queste tecniche si pu\u00f2 mantenere la coesione, ma unendole si ottiene esattamente il contrario. Abbiamo abbandonato l'approccio CSS-in-JS e siamo migrati a <a href=\"https:\/\/thecodest.co\/blog\/how-we-care-about-quality-of-css-code\/\">SCSS<\/a>. Non \u00e8 stato facile e veloce, ma con un po' di aiuto ce l'abbiamo fatta. Abbiamo iniziato a stilizzare i tag html secondo la metodologia BEM e, naturalmente, abbiamo inserito gli stili in file separati, uno per componente. Ho detto che il passaggio di oggetti JS a <strong>Componenti in stile<\/strong> \u00e8 una funzione fantastica, ma in <strong>SCSS<\/strong> \u00e8 impossibile. Penso che siamo tutti d'accordo sul fatto che la sintassi con cui React vuole codificare le classi condizionali \u00e8 pessima.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/react-classnames.png\" alt=\"codice dei nomi delle classi di react \" title=\"reagire nomi di classi\"\/><\/figure>\n\n\n\n<p>Esiste una soluzione piuttosto interessante. Se si collega la metodologia BEM con la metodologia <code>clsx<\/code> si otterr\u00e0 qualcosa di simile a questo (un grande ringraziamento al mio amico Przemek Adamczyk per avermi mostrato questa libreria)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/will-clsx.png\" alt=\"codice clsx\" title=\"esempio di codice clsx\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Sembra molto pi\u00f9 pulito, non credete?<\/h2>\n\n\n\n<p>La cosa migliore \u00e8 che \u00e8 sufficiente digitare la variabile di condizione a livello di componente e<br>non a livello di stile. In questo modo si risparmia davvero tempo. Purtroppo, questa soluzione ha i suoi svantaggi.<br><strong>SCSS<\/strong> \u00e8 semplice e amichevole, ma bisogna fare attenzione quando lo si usa con Next.js. Questo framework non<br>permettono di importare i file di stile direttamente nel file del componente (solo i moduli CSS).<\/p>\n\n\n\n<p>Se si preferisce un file per ogni componente, \u00e8 necessario creare <code>index.scss<\/code> contenente tutti i vostri <strong>SCSS<\/strong> e<br>importarlo nella cartella <code>_app.tsx<\/code> file. L'unico problema \u00e8 che \u00e8 necessario importare manualmente ogni file <strong>SCSS<\/strong> creato. Nell'React, invece, questo problema non esiste e si pu\u00f2 importare il file <strong>SCSS<\/strong> file dove si vuole. Non fraintendetemi. <strong>Componenti in stile<\/strong> sono davvero ottimi. Come ho gi\u00e0 detto, il passaggio di variabili JS e il tema globale sono caratteristiche sorprendenti. Quando si costruisce un'applicazione di grandi dimensioni in cui l'ottimizzazione \u00e8 fondamentale, questa libreria probabilmente soddisfer\u00e0 le vostre esigenze. Nel nostro caso, per\u00f2, la migrazione a <strong>SCSS<\/strong> ha vinto il jackpot.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Riassunto<\/h2>\n\n\n\n<p>In conclusione, sebbene vi siano validi argomenti a favore di entrambi <strong>SCSS e componenti stilizzati <\/strong> in <strong><a href=\"https:\/\/thecodest.co\/it\/blog\/find-your-node-js-expert-for-hire-today\/\">sviluppo web<\/a> <\/strong>La decisione finale dipende da diversi fattori. <strong>SCSS <\/strong> offre una sintassi pi\u00f9 familiare per <strong>sviluppatori esperti <\/strong> in CSS tradizionali e fornisce una perfetta integrazione con i sistemi di <strong>basi di codice <\/strong> e <strong>librerie di componenti <\/strong>.<\/p>\n\n\n\n<p>D'altra parte, <strong>Componenti in stile <\/strong> offrire una maggiore <strong>esperienza di sviluppatore <\/strong> con la sua capacit\u00e0 di incapsulare gli stili all'interno dei componenti e di semplificare il processo di styling. Promuove inoltre la modularit\u00e0 e la riutilizzabilit\u00e0 del codice, consentendo al front-end di <a href=\"https:\/\/thecodest.co\/it\/blog\/team-extension-guide-software-development\/\">ingegneri<\/a> per gestire in modo efficiente il <strong>directory dei componenti <\/strong> e creare un'interfaccia utente coerente in tutto il <strong><a href=\"https:\/\/thecodest.co\/it\/blog\/find-your-ideal-stack-for-web-development\/\">web<\/a> app <\/strong>. Considerando l'importanza di <strong>utente <a href=\"https:\/\/thecodest.co\/it\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">dati<\/a> <\/strong> sicurezza e prestazioni, \u00e8 fondamentale valutare l'impatto di entrambi gli approcci sulle dimensioni finali del bundle e sui tempi di caricamento. In definitiva, la scelta tra <strong>SCSS e componenti stilizzati <\/strong> dovrebbe essere basata sulle esigenze specifiche del progetto, sulle competenze del <strong><a href=\"https:\/\/thecodest.co\/it\/blog\/how-to-hire-the-best-outsourced-development-team-for-a-scaleup\/\">team di sviluppo<\/a> <\/strong>e gli obiettivi generali del progetto <strong> applicazione web <\/strong>. \u00c8 consigliabile che gli sviluppatori valutino tutti i fattori, restino aggiornati tramite <strong>post sul blog <\/strong> e le discussioni di settore, e prendere una decisione informata che sia in linea con i requisiti del progetto e che migliori l'insieme del progetto. <strong>front-end <a href=\"https:\/\/thecodest.co\/it\/blog\/what-to-look-for-in-a-custom-software-development-company\/\">processo di sviluppo<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Negli ultimi due mesi ho lavorato a un progetto per uno dei nostri clienti. Quando ero all'inizio, mi sono trovato di fronte alla scelta della libreria per lo styling.<\/p>","protected":false},"author":2,"featured_media":3932,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Why Should You Use SCSS Instead of Styled Components? - The Codest<\/title>\n<meta name=\"description\" content=\"For the last couple of months, I\u2019ve been working on a project for one of our clients. When I was at very beginning, I faced a choice of the library for styling.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/it\/blog\/perche-usare-gli-scss-invece-dei-componenti-stilizzati\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Should You Use SCSS Instead of Styled Components?\" \/>\n<meta property=\"og:description\" content=\"For the last couple of months, I\u2019ve been working on a project for one of our clients. When I was at very beginning, I faced a choice of the library for styling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/it\/blog\/perche-usare-gli-scss-invece-dei-componenti-stilizzati\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-01T08:53:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-24T11:21:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Why Should You Use SCSS Instead of Styled Components?\",\"datePublished\":\"2019-04-01T08:53:00+00:00\",\"dateModified\":\"2026-04-24T11:21:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"},\"wordCount\":820,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/scss_stc.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\",\"name\":\"Why Should You Use SCSS Instead of Styled Components? - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/scss_stc.png\",\"datePublished\":\"2019-04-01T08:53:00+00:00\",\"dateModified\":\"2026-04-24T11:21:07+00:00\",\"description\":\"For the last couple of months, I\u2019ve been working on a project for one of our clients. When I was at very beginning, I faced a choice of the library for styling.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/scss_stc.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/scss_stc.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Should You Use SCSS Instead of Styled Components?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/it\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Perch\u00e9 usare SCSS invece dei componenti con stile? - The Codest","description":"Negli ultimi due mesi ho lavorato a un progetto per uno dei nostri clienti. Quando ero all'inizio, mi sono trovato di fronte alla scelta della libreria per lo styling.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/it\/blog\/perche-usare-gli-scss-invece-dei-componenti-stilizzati\/","og_locale":"it_IT","og_type":"article","og_title":"Why Should You Use SCSS Instead of Styled Components?","og_description":"For the last couple of months, I\u2019ve been working on a project for one of our clients. When I was at very beginning, I faced a choice of the library for styling.","og_url":"https:\/\/thecodest.co\/it\/blog\/perche-usare-gli-scss-invece-dei-componenti-stilizzati\/","og_site_name":"The Codest","article_published_time":"2019-04-01T08:53:00+00:00","article_modified_time":"2026-04-24T11:21:07+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Why Should You Use SCSS Instead of Styled Components?","datePublished":"2019-04-01T08:53:00+00:00","dateModified":"2026-04-24T11:21:07+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"},"wordCount":820,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","articleSection":["Software Development"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/","url":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/","name":"Perch\u00e9 usare SCSS invece dei componenti con stile? - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","datePublished":"2019-04-01T08:53:00+00:00","dateModified":"2026-04-24T11:21:07+00:00","description":"Negli ultimi due mesi ho lavorato a un progetto per uno dei nostri clienti. Quando ero all'inizio, mi sono trovato di fronte alla scelta della libreria per lo styling.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/scss_stc.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Why Should You Use SCSS Instead of Styled Components?"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/it\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/it\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}