{"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":"warum-sollten-sie-scss-anstelle-von-styled-components-verwenden","status":"publish","type":"post","link":"https:\/\/thecodest.co\/de\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"Warum sollten Sie SCSS anstelle von Styled Components verwenden?"},"content":{"rendered":"<p>Nach einem Vergleich g\u00e4ngiger L\u00f6sungen wie einfaches CSS, Emotion, <strong>SCSS <\/strong>und<strong> Gestaltete Komponenten<\/strong>w\u00e4hlte ich schlie\u00dflich die letzte aus. Alles schien in Ordnung zu sein. Es hat eine sehr beliebte Bibliothek heutzutage, was bedeutet<br>Es gibt bereits eine gro\u00dfe Community, wenn ich also auf Probleme sto\u00dfe, finde ich wahrscheinlich irgendwo auf Stack Overflow oder GitHub eine L\u00f6sung. Abgesehen davon, <strong>Gestaltete Komponenten<\/strong> verf\u00fcgen \u00fcber einige Optimierungsfunktionen, d. h. sie werden nur dann gerendert, wenn sie ben\u00f6tigt werden. Die <a href=\"https:\/\/thecodest.co\/de\/dictionary\/why-do-projects-fail\/\">Projekt<\/a> sollte mit Hilfe von <a href=\"https:\/\/thecodest.co\/de\/blog\/conditional-component-visibility-in-react\/\">React<\/a> und <a href=\"https:\/\/thecodest.co\/de\/dictionary\/typescript-developer\/\">Typoskript<\/a>. Diese Bibliothek bietet gro\u00dfartige Unterst\u00fctzung f\u00fcr beide Technologien. Klingt gro\u00dfartig, oder?<\/p>\n\n\n\n<p>Dann habe ich angefangen zu programmieren. Nach einem Monat, als die App gewachsen war, wurde das Frontend <a href=\"https:\/\/thecodest.co\/de\/blog\/best-practices-for-building-a-strong-and-cohesive-team\/\">Team<\/a> und ich auf die Bereitstellung von Funktionen konzentrierten, fanden wir heraus, dass die erstaunlichen <strong>Gestaltete Komponenten <\/strong>Die Bibliothek hatte ein Eigentor geschossen, und ich werde Ihnen sagen, warum.<\/p>\n\n\n\n<p>Zun\u00e4chst einmal die Namenskonvention. Zur Unterscheidung <strong>Gestaltete Komponenten<\/strong> von <a href=\"https:\/\/thecodest.co\/de\/blog\/react-development-all-you-have-to-know\/\">React-Bestandteile<\/a>, musste ich die <code>Gestaltet<\/code> Pr\u00e4fix, das die <a href=\"https:\/\/thecodest.co\/de\/dictionary\/what-is-code-refactoring\/\">Code<\/a> Lesbarkeit. Dann (was seltsam sein k\u00f6nnte), Typescript-Unterst\u00fctzung. <strong>Gestaltete Komponenten<\/strong>basieren, wie Sie vielleicht wissen, auf dem CSS-in-JS-Ansatz. Das hei\u00dft, man kann ihnen eine beliebige Requisite \u00fcbergeben und den Stil der Eingabe basierend auf dieser Requisite \u00e4ndern, und ich pers\u00f6nlich finde diese Funktion gro\u00dfartig. In Typescript sollte man auch den Typ dieser Requisite implementieren, damit der Code l\u00e4nger wird. <strong>Gestaltete Komponente<\/strong>. \"Aber es w\u00fcrde doch nur 5 Sekunden l\u00e4nger dauern, wo liegt also das Problem\", werden Sie vielleicht sagen. Sie haben Recht, obwohl, wenn die App schnell skaliert und die Anzahl der Komponenten ist<br>Mit zunehmender Dauer k\u00f6nnen diese 5 Sekunden leicht um das Hundertfache vervielfacht werden. Ein weiteres Problem ist die Platzierung der <strong>Gestaltete Komponenten<\/strong>.<\/p>\n\n\n\n<p>Einige <strong><a href=\"https:\/\/thecodest.co\/de\/blog\/hire-vue-js-developers\/\">JS<\/a> Entwickler<\/strong> platzieren sie in derselben Datei wie die Komponente, zu der sie geh\u00f6ren, und andere erstellen separate Dateien f\u00fcr sie. Beide Ans\u00e4tze sind aus vielen Gr\u00fcnden gut. Es h\u00e4ngt haupts\u00e4chlich von der Komplexit\u00e4t der Komponente ab. Wenn man eine dieser Techniken anwendet, kann man die Koh\u00e4sion aufrechterhalten, aber wenn man sie zusammenf\u00fchrt, erreicht man genau das Gegenteil. Wir haben uns von dem CSS-in-JS-Ansatz verabschiedet und sind zu <a href=\"https:\/\/thecodest.co\/blog\/how-we-care-about-quality-of-css-code\/\">SCSS<\/a>. Es war nicht einfach und schnell, aber mit ein wenig Hilfe haben wir es geschafft. Wir begannen mit dem Styling von HTML-Tags in der BEM-Methodik und legten nat\u00fcrlich Stile in separaten Dateien ab, eine pro Komponente. Ich sagte, dass die \u00dcbergabe von JS-Props an <strong>Gestaltete Komponenten<\/strong> ist eine gro\u00dfartige Funktion, aber in <strong>SCSS<\/strong> das ist unm\u00f6glich. Ich denke, wir sind uns auch alle einig, dass die Syntax, die React f\u00fcr die Kodierung bedingter Klassen verwenden will, schrecklich ist.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/react-classnames.png\" alt=\"Code der React-Klassennamen \" title=\"react Klassennamen\"\/><\/figure>\n\n\n\n<p>Nun, es gibt eine recht interessante L\u00f6sung. Wenn Sie die BEM-Methodik mit der <code>clsx<\/code> Bibliothek, erhalten Sie etwas wie dieses (ein gro\u00dfes Lob an meinen Freund Przemek Adamczyk, der mir diese Bibliothek gezeigt hat)<\/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=\"Beispiel f\u00fcr clsx-Code\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Sieht viel sauberer aus, finden Sie nicht auch?<\/h2>\n\n\n\n<p>Das Beste ist, dass Sie nur die Bedingungsvariable auf der Komponentenebene eingeben m\u00fcssen und<br>nicht auf der Ebene des Stylings. Das spart wirklich Zeit. Leider hat eine solche L\u00f6sung auch ihre Nachteile.<br><strong>SCSS<\/strong> ist einfach und freundlich, aber seien Sie vorsichtig, wenn Sie es mit Next.js verwenden. Dieses Framework bietet keine<br>erlauben es, Stildateien direkt in die Komponentendatei zu importieren (nur CSS-Module).<\/p>\n\n\n\n<p>Wenn Sie eine Datei pro Komponente bevorzugen, m\u00fcssen Sie eine <code>index.scss<\/code> mit all Ihren <strong>SCSS<\/strong> Dateien und<br>importieren sie in die <code>_app.tsx<\/code> Datei. Das einzige Problem ist, dass Sie jede Datei manuell importieren m\u00fcssen. <strong>SCSS<\/strong> Datei, die Sie erstellt haben. In React gibt es dieses Problem jedoch nicht, und Sie k\u00f6nnen Folgendes importieren <strong>SCSS<\/strong> Dateien, wo immer Sie wollen. Verstehen Sie mich nicht falsch. <strong>Gestaltete Komponenten<\/strong> sind wirklich gut. Wie ich bereits sagte, sind die \u00dcbergabe von JS-Variablen sowie das globale Thema erstaunliche Funktionen. Wenn Sie eine gro\u00dfe App bauen, bei der Optimierung entscheidend ist, wird diese Bibliothek wahrscheinlich Ihre Bed\u00fcrfnisse erf\u00fcllen. In unserem Fall jedoch ist die Migration zu <strong>SCSS<\/strong> den Jackpot zu knacken.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Res\u00fcmee<\/h2>\n\n\n\n<p>Zusammenfassend l\u00e4sst sich sagen, dass es zwar stichhaltige Argumente f\u00fcr beide <strong>SCSS und gestaltete Komponenten <\/strong> in <strong><a href=\"https:\/\/thecodest.co\/de\/blog\/find-your-node-js-expert-for-hire-today\/\">Web-Entwicklung<\/a> <\/strong>Die endg\u00fcltige Entscheidung h\u00e4ngt von verschiedenen Faktoren ab. <strong>SCSS <\/strong> bietet eine vertrautere Syntax f\u00fcr <strong>erfahrene Entwickler <\/strong> in traditionellem CSS und bietet eine nahtlose Integration mit bestehenden <strong>Code-Basen <\/strong> und <strong>Komponentenbibliotheken <\/strong>.<\/p>\n\n\n\n<p>Andererseits, <strong>Gestaltete Komponenten <\/strong> erweitertes Angebot <strong>Entwicklererfahrung <\/strong> mit seiner F\u00e4higkeit, Stile in Komponenten zu kapseln und den Styling-Prozess zu vereinfachen. Es f\u00f6rdert auch die Modularit\u00e4t und Wiederverwendbarkeit des Codes und erm\u00f6glicht Front-End <a href=\"https:\/\/thecodest.co\/de\/blog\/team-extension-guide-software-development\/\">Ingenieure<\/a> zur effizienten Verwaltung der <strong>Komponentenverzeichnis <\/strong> und eine konsistente Benutzeroberfl\u00e4che f\u00fcr die <strong><a href=\"https:\/\/thecodest.co\/de\/blog\/find-your-ideal-stack-for-web-development\/\">Web<\/a> app <\/strong>. In Anbetracht der Bedeutung der <strong>Benutzer <a href=\"https:\/\/thecodest.co\/de\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">Daten<\/a> <\/strong> Sicherheit und Leistung zu gew\u00e4hrleisten, ist es von entscheidender Bedeutung, die Auswirkungen beider Ans\u00e4tze auf die endg\u00fcltige Paketgr\u00f6\u00dfe und die Ladezeiten zu bewerten. Letztlich ist die Wahl zwischen <strong>SCSS und gestaltete Komponenten <\/strong> sollte auf den spezifischen Bed\u00fcrfnissen des Projekts und den F\u00e4higkeiten der Mitarbeiter beruhen. <strong><a href=\"https:\/\/thecodest.co\/de\/blog\/how-to-hire-the-best-outsourced-development-team-for-a-scaleup\/\">Entwicklungsteam<\/a> <\/strong>und die allgemeinen Ziele des <strong> Webanwendung <\/strong>. F\u00fcr Entwickler ist es ratsam, alle Faktoren zu bewerten, sich durch <strong>Blogeintr\u00e4ge <\/strong> und Branchendiskussionen zu informieren und eine fundierte Entscheidung zu treffen, die den Anforderungen des Projekts entspricht und das Gesamtbild verbessert. <strong>Frontend <a href=\"https:\/\/thecodest.co\/de\/blog\/what-to-look-for-in-a-custom-software-development-company\/\">Entwicklungsprozess<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>In den letzten paar Monaten habe ich an einem Projekt f\u00fcr einen unserer Kunden gearbeitet. Ganz am Anfang stand ich vor der Wahl der Bibliothek f\u00fcr das 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\/de\/blog\/warum-sollten-sie-scss-anstelle-von-styled-components-verwenden\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/blog\/warum-sollten-sie-scss-anstelle-von-styled-components-verwenden\/\" \/>\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\u00a0Minuten\" \/>\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\":\"de\",\"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\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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\":\"de\",\"@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\\\/de\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Warum sollten Sie SCSS anstelle von Styled Components verwenden? - The Codest","description":"In den letzten paar Monaten habe ich an einem Projekt f\u00fcr einen unserer Kunden gearbeitet. Ganz am Anfang stand ich vor der Wahl der Bibliothek f\u00fcr das 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\/de\/blog\/warum-sollten-sie-scss-anstelle-von-styled-components-verwenden\/","og_locale":"de_DE","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\/de\/blog\/warum-sollten-sie-scss-anstelle-von-styled-components-verwenden\/","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\u00a0Minuten"},"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":"de","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":"Warum sollten Sie SCSS anstelle von Styled Components verwenden? - 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":"In den letzten paar Monaten habe ich an einem Projekt f\u00fcr einen unserer Kunden gearbeitet. Ganz am Anfang stand ich vor der Wahl der Bibliothek f\u00fcr das Styling.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"de","@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":"Der 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":"de"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Der Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"de","@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":"de","@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\/de\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}