{"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":"waarom-zou-je-scss-gebruiken-in-plaats-van-gestileerde-componenten","status":"publish","type":"post","link":"https:\/\/thecodest.co\/nl\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"Waarom zou je SCSS gebruiken in plaats van gestileerde componenten?"},"content":{"rendered":"<p>Na het vergelijken van populaire oplossingen zoals gewone CSS, Emotion, <strong>SCSS <\/strong>en<strong> Gestileerde onderdelen<\/strong>Uiteindelijk selecteerde ik de laatste. Alles leek in orde te zijn. De bibliotheek is tegenwoordig erg populair, wat betekent dat<br>er is al een grote community, dus als ik problemen tegenkom, vind ik waarschijnlijk wel ergens een oplossing op Stack Overflow of GitHub. Daarnaast, <strong>Gestileerde onderdelen<\/strong> hebben enkele optimalisatiefuncties, wat betekent dat ze alleen renderen wanneer dat nodig is. De <a href=\"https:\/\/thecodest.co\/nl\/dictionary\/why-do-projects-fail\/\">project<\/a> zou naar verwachting worden gebouwd met <a href=\"https:\/\/thecodest.co\/nl\/blog\/conditional-component-visibility-in-react\/\">React<\/a> en <a href=\"https:\/\/thecodest.co\/nl\/dictionary\/typescript-developer\/\">Typescript<\/a>. Deze bibliotheek heeft geweldige ondersteuning voor beide technologie\u00ebn. Klinkt geweldig, toch?<\/p>\n\n\n\n<p>Ik begon toen met coderen. Na een maand, toen de app gegroeid was, werd de frontend <a href=\"https:\/\/thecodest.co\/nl\/blog\/best-practices-for-building-a-strong-and-cohesive-team\/\">team<\/a> en ik gericht op het leveren van functies, ontdekten we dat de verbazingwekkende <strong>Gestileerde onderdelen <\/strong>De bibliotheek had een eigen doel en ik zal je vertellen waarom.<\/p>\n\n\n\n<p>Allereerst de naamgevingsconventie. Om onderscheid te maken tussen <strong>Gestileerde onderdelen<\/strong> van <a href=\"https:\/\/thecodest.co\/nl\/blog\/react-development-all-you-have-to-know\/\">React onderdelen<\/a>, moest ik de <code>Gestileerd<\/code> voorvoegsel dat afnam <a href=\"https:\/\/thecodest.co\/nl\/dictionary\/what-is-code-refactoring\/\">code<\/a> leesbaarheid. Dan (wat misschien vreemd is), ondersteuning voor Typescript. <strong>Gestileerde onderdelen<\/strong>zijn, zoals je misschien weet, gebaseerd op de CSS-in-JS aanpak. Dit betekent dat je een willekeurige prop kunt doorgeven en de stijl van de invoer kunt wijzigen op basis van deze prop en persoonlijk vind ik dit een geweldige functie. In Typescript moet je ook het type van deze eigenschap implementeren, waardoor de code langer wordt. <strong>Gestileerd onderdeel<\/strong>. \"Maar het zou 5 seconden langer duren, dus wat is je probleem\" - zou je kunnen zeggen. Je hebt gelijk, hoewel als de app snel opschaalt en het aantal componenten is<br>toenemend, kunnen deze 5 seconden gemakkelijk met honderden vermenigvuldigd worden. Een ander probleem is de plaatsing van de <strong>Gestileerde onderdelen<\/strong>.<\/p>\n\n\n\n<p>Sommige <strong><a href=\"https:\/\/thecodest.co\/nl\/blog\/hire-vue-js-developers\/\">JS<\/a> ontwikkelaars<\/strong> plaatsen ze in hetzelfde bestand met de component waartoe ze behoren en anderen maken er aparte bestanden voor. Beide benaderingen zijn goed om vele redenen. Het hangt vooral af van de complexiteit van het component. Het volgen van een van deze technieken kan de cohesie behouden, maar ze samenvoegen geeft precies het tegenovergestelde. We zijn afgestapt van de CSS-in-JS aanpak en gemigreerd naar <a href=\"https:\/\/thecodest.co\/blog\/how-we-care-about-quality-of-css-code\/\">SCSS<\/a>. Het was niet gemakkelijk en snel, maar met een beetje hulp hebben we het gehaald. We begonnen met het stylen van html-tags in de BEM-methodologie en zetten de stijlen natuurlijk in aparte bestanden, \u00e9\u00e9n per component. Ik zei dat het doorgeven van JS props aan <strong>Gestileerde onderdelen<\/strong> is een geweldige functie, maar in <strong>SCSS<\/strong> het is onmogelijk. Ik denk dat we het er ook allemaal over eens zijn dat de syntaxis die React wil gebruiken om voorwaardelijke klassen te coderen verschrikkelijk is.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/react-classnames.png\" alt=\"code van react classnames \" title=\"react klasnamen\"\/><\/figure>\n\n\n\n<p>Nou, er is een heel interessante oplossing. Als je de BEM-methodologie verbindt met de <code>clsx<\/code> bibliotheek, krijg je zoiets als dit (grote shoutout naar mijn vriend Przemek Adamczyk voor het laten zien van deze bibliotheek)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/will-clsx.png\" alt=\"clsx-code\" title=\"voorbeeld van clsx-code\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Ziet er veel netter uit, vind je niet?<\/h2>\n\n\n\n<p>Het beste is dat je alleen de conditievariabele op componentniveau hoeft te typen en<br>niet op het niveau van styling. Het bespaart echt tijd. Helaas heeft zo'n oplossing ook nadelen.<br><strong>SCSS<\/strong> is eenvoudig en vriendelijk, maar wees voorzichtig als je het gebruikt met Next.js. Dit framework doet niet<br>toestaan om stijlbestanden rechtstreeks in het componentbestand te importeren (alleen CSS-modules).<\/p>\n\n\n\n<p>Als je \u00e9\u00e9n bestand per component wilt, moet je het volgende maken <code>index.scss<\/code> met al uw <strong>SCSS<\/strong> bestanden en<br>importeer het in de <code>_app.tsx<\/code> bestand. Het enige probleem is dat je handmatig elk <strong>SCSS<\/strong> bestand dat je hebt gemaakt. In React bestaat dit probleem echter niet en kun je het volgende importeren <strong>SCSS<\/strong> bestanden waar je maar wilt. Begrijp me niet verkeerd. <strong>Gestileerde onderdelen<\/strong> zijn echt goed. Zoals ik al eerder zei, zijn het doorgeven van JS-variabelen en het globale thema geweldige functies. Als je een grote app bouwt waarbij optimalisatie cruciaal is, zal deze bibliotheek waarschijnlijk aan je behoeften voldoen. In ons geval is migratie naar <strong>SCSS<\/strong> de jackpot winnen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Samenvattend<\/h2>\n\n\n\n<p>Concluderend, hoewel er geldige argumenten zijn voor beide <strong>SCSS en gestileerde componenten <\/strong> in <strong><a href=\"https:\/\/thecodest.co\/nl\/blog\/find-your-node-js-expert-for-hire-today\/\">webontwikkeling<\/a> <\/strong>De uiteindelijke beslissing hangt af van verschillende factoren. <strong>SCSS <\/strong> biedt een meer vertrouwde syntaxis voor <strong>ervaren ontwikkelaars <\/strong> in traditionele CSS en biedt een naadloze integratie met bestaande <strong>codebases <\/strong> en <strong>componentbibliotheken <\/strong>.<\/p>\n\n\n\n<p>Aan de andere kant, <strong>Gestileerde onderdelen <\/strong> bieden verbeterde <strong>Ervaring als ontwikkelaar <\/strong> met de mogelijkheid om stijlen in te kapselen in componenten en het stylingproces te vereenvoudigen. Het bevordert ook modulariteit en herbruikbaarheid van code, waardoor front-end <a href=\"https:\/\/thecodest.co\/nl\/blog\/team-extension-guide-software-development\/\">ingenieurs<\/a> om de <strong>onderdelenmap <\/strong> en een consistente UI maken voor alle <strong><a href=\"https:\/\/thecodest.co\/nl\/blog\/find-your-ideal-stack-for-web-development\/\">web<\/a> app <\/strong>. Gezien het belang van <strong>gebruiker <a href=\"https:\/\/thecodest.co\/nl\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">gegevens<\/a> <\/strong> veiligheid en prestaties, is het cruciaal om de invloed van beide benaderingen op de uiteindelijke bundelgrootte en laadtijden te beoordelen. Uiteindelijk is de keuze tussen <strong>SCSS en gestileerde componenten <\/strong> moet gebaseerd zijn op de specifieke behoeften van het project, de vaardigheden van de <strong><a href=\"https:\/\/thecodest.co\/nl\/blog\/how-to-hire-the-best-outsourced-development-team-for-a-scaleup\/\">ontwikkelingsteam<\/a> <\/strong>en de algemene doelen van de <strong> webapplicatie <\/strong>. Het is raadzaam voor ontwikkelaars om alle factoren te evalueren, op de hoogte te blijven via <strong>blogberichten <\/strong> en discussies in de sector en een weloverwogen beslissing nemen die aansluit bij hun projectvereisten en de algehele kwaliteit van het project verbetert. <strong>front-end <a href=\"https:\/\/thecodest.co\/nl\/blog\/what-to-look-for-in-a-custom-software-development-company\/\">ontwikkelingsproces<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>De afgelopen maanden heb ik gewerkt aan een project voor een van onze klanten. Toen ik helemaal aan het begin stond, moest ik een keuze maken uit de bibliotheek voor 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\/nl\/blog\/waarom-zou-je-scss-gebruiken-in-plaats-van-gestileerde-componenten\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\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\/nl\/blog\/waarom-zou-je-scss-gebruiken-in-plaats-van-gestileerde-componenten\/\" \/>\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 minuten\" \/>\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\":\"nl-NL\",\"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\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@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\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@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\":\"nl-NL\",\"@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\\\/nl\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Waarom zou je SCSS gebruiken in plaats van gestileerde componenten? - The Codest","description":"De afgelopen maanden heb ik gewerkt aan een project voor een van onze klanten. Toen ik helemaal aan het begin stond, moest ik een keuze maken uit de bibliotheek voor 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\/nl\/blog\/waarom-zou-je-scss-gebruiken-in-plaats-van-gestileerde-componenten\/","og_locale":"nl_NL","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\/nl\/blog\/waarom-zou-je-scss-gebruiken-in-plaats-van-gestileerde-componenten\/","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 minuten"},"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":"nl-NL","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":"Waarom zou je SCSS gebruiken in plaats van gestileerde componenten? - 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":"De afgelopen maanden heb ik gewerkt aan een project voor een van onze klanten. Toen ik helemaal aan het begin stond, moest ik een keuze maken uit de bibliotheek voor styling.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@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":"nl-NL"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@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":"nl-NL","@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\/nl\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}