{"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":"varfor-ska-man-anvanda-scss-istallet-for-stylade-komponenter","status":"publish","type":"post","link":"https:\/\/thecodest.co\/sv\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"Varf\u00f6r ska man anv\u00e4nda SCSS ist\u00e4llet f\u00f6r Styled Components?"},"content":{"rendered":"

Efter att ha j\u00e4mf\u00f6rt popul\u00e4ra l\u00f6sningar som vanlig CSS, Emotion, SCSS <\/strong>och Stylade komponenter<\/strong>valde jag till slut den sista. Allt verkade vara bra. Det har ett mycket popul\u00e4rt bibliotek nuf\u00f6rtiden, vilket inneb\u00e4r
det finns redan ett stort samh\u00e4lle s\u00e5 om jag skulle m\u00f6ta n\u00e5gra problem, hittar jag f\u00f6rmodligen en l\u00f6sning n\u00e5gonstans p\u00e5 Stack Overflow eller GitHub. F\u00f6rutom det, Stylade komponenter<\/strong> har vissa optimeringsfunktioner som inneb\u00e4r att de bara renderar n\u00e4r de beh\u00f6vs. De projekt<\/a> f\u00f6rv\u00e4ntades byggas med hj\u00e4lp av React<\/a> och Typsnitt<\/a>. Det h\u00e4r biblioteket har bra st\u00f6d f\u00f6r b\u00e5da teknikerna. L\u00e5ter fantastiskt, eller hur?<\/p>\n\n\n\n

Jag b\u00f6rjade koda d\u00e5. Efter en m\u00e5nad, n\u00e4r appen har vuxit, har frontend Team<\/a> och jag fokuserade p\u00e5 att leverera funktioner, uppt\u00e4ckte vi att den fantastiska Stylade komponenter <\/strong>biblioteket hade sitt eget m\u00e5l och jag ska ber\u00e4tta varf\u00f6r.<\/p>\n\n\n\n

F\u00f6rst av allt, namnkonventionen. F\u00f6r att s\u00e4rskilja Stylade komponenter<\/strong> fr\u00e5n React-komponenter<\/a>, var jag tvungen att anv\u00e4nda Stylad<\/code> prefix som minskade kod<\/a> l\u00e4sbarhet. Sedan (vilket kanske \u00e4r konstigt), st\u00f6d f\u00f6r Typescript. Stylade komponenter<\/strong>\u00e4r, som du kanske vet, baserade p\u00e5 CSS-in-JS-metoden. Detta inneb\u00e4r att du kan skicka vilken prop som helst till dem och \u00e4ndra stilen p\u00e5, dvs. inmatningen baserat p\u00e5 denna prop och jag tycker personligen att den h\u00e4r funktionen \u00e4r fantastisk. I Typescript b\u00f6r du ocks\u00e5 implementera typen av denna prop g\u00f6r det kod l\u00e4ngre n\u00e5gon Stylad komponent<\/strong>. \"Men det skulle ju ta 5 sekunder till, s\u00e5 vad \u00e4r problemet\", kanske du s\u00e4ger. Du har r\u00e4tt, \u00e4ven om n\u00e4r appen skalas upp snabbt och antalet komponenter \u00e4r
\u00f6kar, kan dessa 5 sekunder l\u00e4tt multipliceras med hundratals g\u00e5nger. Ett annat problem \u00e4r placeringen av Stylade komponenter<\/strong>.<\/p>\n\n\n\n

N\u00e5gra JS<\/a> Utvecklare<\/strong> placerar dem i samma fil som den komponent de tillh\u00f6r, medan andra skapar separata filer f\u00f6r dem. B\u00e5da tillv\u00e4gag\u00e5ngss\u00e4tten \u00e4r bra av m\u00e5nga sk\u00e4l. Det beror mest p\u00e5 hur komplex komponenten \u00e4r. Att f\u00f6lja en av dessa tekniker kan uppr\u00e4tth\u00e5lla sammanh\u00e5llningen men att sl\u00e5 samman dem ger precis motsatsen. Vi \u00f6vergav CSS-in-JS-metoden och migrerade till SCSS<\/a>. Det var inte l\u00e4tt och snabbt men med lite hj\u00e4lp s\u00e5 klarade vi det. Vi b\u00f6rjade styla html-taggar enligt BEM-metoden och lade naturligtvis stilarna i separata filer, en per komponent. Jag sa att passera JS props till Stylade komponenter<\/strong> \u00e4r en fantastisk funktion, men i SCSS<\/strong> det \u00e4r om\u00f6jligt. Jag tror ocks\u00e5 att vi alla \u00e4r \u00f6verens om att den syntax som React vill anv\u00e4nda f\u00f6r att koda villkorliga klasser \u00e4r hemsk.<\/p>\n\n\n\n

\"kod<\/figure>\n\n\n\n

Det finns en ganska intressant l\u00f6sning. Om du kopplar ihop BEM-metoden med clsx<\/code> bibliotek, f\u00e5r du n\u00e5got liknande detta (stort tack till min v\u00e4n Przemek Adamczyk f\u00f6r att du visade mig detta bibliotek)<\/p>\n\n\n\n

\"clsx-kod\"<\/figure>\n\n\n\n

Ser mycket renare ut, tycker du inte?<\/h2>\n\n\n\n

Det b\u00e4sta \u00e4r att du bara beh\u00f6ver skriva in villkorsvariabeln p\u00e5 komponentniv\u00e5 och
inte p\u00e5 stylingniv\u00e5. Det sparar verkligen tid. Tyv\u00e4rr har en s\u00e5dan l\u00f6sning sina nackdelar.
SCSS<\/strong> \u00e4r enkelt och anv\u00e4ndarv\u00e4nligt, men var f\u00f6rsiktig n\u00e4r du anv\u00e4nder det med Next.js. Detta ramverk g\u00f6r inte
g\u00f6r det m\u00f6jligt att importera stilfiler direkt till komponentfilen (endast CSS-moduler).<\/p>\n\n\n\n

Om du f\u00f6redrar en fil per komponent m\u00e5ste du skapa index.scss<\/code> som inneh\u00e5ller alla dina SCSS<\/strong> filer och
importera den till _app.tsx<\/code> fil. Det enda problemet \u00e4r att du manuellt m\u00e5ste importera varje SCSS<\/strong> fil som du har skapat. I React finns dock inte detta problem och du kan importera SCSS<\/strong> filer var du vill. Missf\u00f6rst\u00e5 mig inte. Stylade komponenter<\/strong> \u00e4r riktigt bra. Som jag sa tidigare \u00e4r passering av JS-variabler samt det globala temat fantastiska funktioner. N\u00e4r du bygger en stor app d\u00e4r optimering \u00e4r avg\u00f6rande kommer det h\u00e4r biblioteket f\u00f6rmodligen att uppfylla dina behov. I v\u00e5rt fall skulle dock migreringen till SCSS<\/strong> sl\u00e5 jackpotten.<\/p>\n\n\n\n

Sammanfattningsvis<\/h2>\n\n\n\n

Sammanfattningsvis, \u00e4ven om det finns giltiga argument f\u00f6r b\u00e5de SCSS och Styled Components <\/strong> i webbutveckling<\/a> <\/strong>Det slutgiltiga beslutet beror p\u00e5 flera olika faktorer. SCSS <\/strong> erbjuder en mer v\u00e4lbekant syntax f\u00f6r erfarna utvecklare <\/strong> i traditionell CSS och ger en s\u00f6ml\u00f6s integration med befintliga kodbaser <\/strong> och komponentbibliotek <\/strong>.<\/p>\n\n\n\n

\u00c5 andra sidan.., Stylade komponenter <\/strong> erbjuda f\u00f6rb\u00e4ttrad erfarenhet som utvecklare <\/strong> med sin f\u00f6rm\u00e5ga att kapsla in stilar i komponenter och f\u00f6renkla stylingprocessen. Det fr\u00e4mjar ocks\u00e5 kodmodularitet och \u00e5teranv\u00e4ndbarhet, vilket g\u00f6r det m\u00f6jligt f\u00f6r front-end Ingenj\u00f6rer<\/a> f\u00f6r att effektivt hantera komponentkatalog <\/strong> och skapa ett konsekvent anv\u00e4ndargr\u00e4nssnitt i hela webb<\/a> app <\/strong>. Med tanke p\u00e5 betydelsen av anv\u00e4ndare data<\/a> <\/strong> s\u00e4kerhet och prestanda \u00e4r det viktigt att bed\u00f6ma hur de b\u00e5da metoderna p\u00e5verkar den slutliga paketstorleken och laddningstiderna. I slut\u00e4ndan \u00e4r valet mellan SCSS och Styled Components <\/strong> b\u00f6r baseras p\u00e5 de specifika behoven i projektet, kompetensen hos de personer som utvecklingsteam<\/a> <\/strong>och de \u00f6vergripande m\u00e5len f\u00f6r webbapplikation <\/strong>. Det \u00e4r tillr\u00e5dligt f\u00f6r utvecklare att utv\u00e4rdera alla faktorer, h\u00e5lla sig uppdaterade genom Blogginl\u00e4gg <\/strong> och branschdiskussioner, och fatta ett v\u00e4lgrundat beslut som \u00f6verensst\u00e4mmer med deras projektkrav och f\u00f6rb\u00e4ttrar den \u00f6vergripande front-end utvecklingsprocess<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"

Under de senaste m\u00e5naderna har jag arbetat med ett projekt f\u00f6r en av v\u00e5ra kunder. N\u00e4r jag var i b\u00f6rjan stod jag inf\u00f6r ett val av bibliotek f\u00f6r 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":"\nWhy Should You Use SCSS Instead of Styled Components? - The Codest<\/title>\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\/sv\/blogg\/varfor-ska-man-anvanda-scss-istallet-for-stylade-komponenter\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\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\/sv\/blogg\/varfor-ska-man-anvanda-scss-istallet-for-stylade-komponenter\/\" \/>\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 minuter\" \/>\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\":\"sv-SE\",\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@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\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@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\":\"sv-SE\",\"@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\\\/sv\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Varf\u00f6r ska man anv\u00e4nda SCSS ist\u00e4llet f\u00f6r Styled Components? - The Codest","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\/sv\/blogg\/varfor-ska-man-anvanda-scss-istallet-for-stylade-komponenter\/","og_locale":"sv_SE","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\/sv\/blogg\/varfor-ska-man-anvanda-scss-istallet-for-stylade-komponenter\/","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 minuter"},"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":"sv-SE","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":"Varf\u00f6r ska man anv\u00e4nda SCSS ist\u00e4llet f\u00f6r 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","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@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":"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":"sv-SE"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@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":"sv-SE","@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\/sv\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}