{"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":"por-que-utilizar-scss-en-lugar-de-styled-components","status":"publish","type":"post","link":"https:\/\/thecodest.co\/es\/blog\/why-should-you-use-scss-instead-of-styled-components\/","title":{"rendered":"\u00bfPor qu\u00e9 utilizar SCSS en lugar de Styled Components?"},"content":{"rendered":"<p>Tras comparar soluciones populares como CSS plano, Emotion, <strong>SCSS <\/strong>y<strong> Componentes estilizados<\/strong>Finalmente seleccion\u00e9 el \u00faltimo. Todo parec\u00eda ir bien. Tiene una biblioteca muy popular hoy en d\u00eda, lo que significa que<br>ya hay una gran comunidad, as\u00ed que si me encuentro con alg\u00fan problema, probablemente encontrar\u00e9 una soluci\u00f3n en alg\u00fan lugar de Stack Overflow o GitHub. Adem\u00e1s de eso, <strong>Componentes estilizados<\/strong> tienen algunas caracter\u00edsticas de optimizaci\u00f3n, lo que significa que s\u00f3lo se renderizan cuando es necesario. El sitio <a href=\"https:\/\/thecodest.co\/es\/dictionary\/why-do-projects-fail\/\">proyecto<\/a> se esperaba que se construyera utilizando <a href=\"https:\/\/thecodest.co\/es\/blog\/conditional-component-visibility-in-react\/\">React<\/a> y <a href=\"https:\/\/thecodest.co\/es\/dictionary\/typescript-developer\/\">Texto mecanografiado<\/a>. Esta biblioteca es compatible con ambas tecnolog\u00edas. Suena genial, \u00bfverdad?<\/p>\n\n\n\n<p>Entonces empec\u00e9 a programar. Despu\u00e9s de un mes, cuando la aplicaci\u00f3n ha crecido, el frontend <a href=\"https:\/\/thecodest.co\/es\/blog\/best-practices-for-building-a-strong-and-cohesive-team\/\">equipo<\/a> y yo centrado en ofrecer prestaciones, descubrimos que el incre\u00edble <strong>Componentes estilizados <\/strong>biblioteca tuvo su propio gol y te dir\u00e9 por qu\u00e9.<\/p>\n\n\n\n<p>En primer lugar, la nomenclatura. Para diferenciar <strong>Componentes estilizados<\/strong> de <a href=\"https:\/\/thecodest.co\/es\/blog\/react-development-all-you-have-to-know\/\">Componentes React<\/a>, Tuve que utilizar el <code>Estilizado<\/code> prefijo que disminuy\u00f3 <a href=\"https:\/\/thecodest.co\/es\/dictionary\/what-is-code-refactoring\/\">c\u00f3digo<\/a> legibilidad. Luego (lo que puede resultar extra\u00f1o), soporte para Typescript. <strong>Componentes estilizados<\/strong>como ya sabr\u00e1s, se basan en el enfoque CSS-in-JS. Esto significa que usted puede pasar cualquier prop a ellos y cambiar el estilo de, es decir, la entrada basada en esta prop y yo personalmente creo que esta caracter\u00edstica es impresionante. En Typescript, tambi\u00e9n debes implementar el tipo de esta prop hace que el c\u00f3digo sea m\u00e1s largo cualquier <strong>Componente estilizado<\/strong>. \"Pero si tardar\u00eda 5 segundos m\u00e1s, \u00bfcu\u00e1l es el problema?\", dir\u00e1s. Tienes raz\u00f3n, aunque cuando la aplicaci\u00f3n se escala r\u00e1pidamente y el n\u00famero de componentes es<br>cada vez mayor, estos 5 segundos pueden multiplicarse f\u00e1cilmente por cientos de veces. Otro problema es la colocaci\u00f3n del <strong>Componentes estilizados<\/strong>.<\/p>\n\n\n\n<p>Algunos <strong><a href=\"https:\/\/thecodest.co\/es\/blog\/hire-vue-js-developers\/\">JS<\/a> desarrolladores<\/strong> los colocan en el mismo archivo con el componente al que pertenecen, y otros crean archivos separados para ellos. Ambos enfoques son buenos por muchas razones. Depende sobre todo de la complejidad del componente. Seguir una de estas t\u00e9cnicas puede mantener la cohesi\u00f3n, pero fusionarlas da exactamente lo contrario. Renunciamos al enfoque CSS-in-JS y migramos a <a href=\"https:\/\/thecodest.co\/blog\/how-we-care-about-quality-of-css-code\/\">SCSS<\/a>. No fue f\u00e1cil ni r\u00e1pido, pero con un poco de ayuda lo conseguimos. Empezamos a aplicar estilos a las etiquetas html seg\u00fan la metodolog\u00eda BEM y, por supuesto, pusimos los estilos en archivos separados, uno por componente. Dije que pasar JS props a <strong>Componentes estilizados<\/strong> es una caracter\u00edstica impresionante, pero en <strong>SCSS<\/strong> es imposible. Creo que tambi\u00e9n todos estamos de acuerdo en que la sintaxis que React quiere para codificar clases condicionales es horrible.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/react-classnames.png\" alt=\"c\u00f3digo de react classnames \" title=\"nombres de clase react\"\/><\/figure>\n\n\n\n<p>Bueno, hay una soluci\u00f3n bastante interesante. Si conectas la metodolog\u00eda BEM con el <code>clsx<\/code> obtendr\u00e1s algo como esto (muchas gracias a mi amigo Przemek Adamczyk por ense\u00f1arme esta biblioteca)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/will-clsx.png\" alt=\"c\u00f3digo clsx\" title=\"ejemplo de c\u00f3digo clsx\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Parece mucho m\u00e1s limpio, \u00bfno crees?<\/h2>\n\n\n\n<p>Lo mejor es que s\u00f3lo tiene que escribir la variable de condici\u00f3n en el nivel de componente y<br>no a nivel de estilo. Realmente ahorra tiempo. Por desgracia, esta soluci\u00f3n tiene sus contras.<br><strong>SCSS<\/strong> es f\u00e1cil y amigable pero ten cuidado cuando lo uses con Next.js. Este framework no<br>permiten importar archivos de estilo directamente en el archivo del componente (s\u00f3lo M\u00f3dulos CSS).<\/p>\n\n\n\n<p>Si prefiere un archivo por componente, tiene que crear <code>index.scss<\/code> que contiene todos sus <strong>SCSS<\/strong> archivos y<br>importarlo al <code>Aplicaci\u00f3n<\/code> archivo. El \u00fanico problema es que hay que importar manualmente cada <strong>SCSS<\/strong> que ha creado. En React, sin embargo, este problema no existe y puedes importar <strong>SCSS<\/strong> archivos donde quieras. No me malinterpretes. <strong>Componentes estilizados<\/strong> son realmente buenas. Como he dicho antes, pasar variables JS as\u00ed como el tema global son caracter\u00edsticas incre\u00edbles. Cuando construyes una aplicaci\u00f3n grande donde la optimizaci\u00f3n es crucial, esta librer\u00eda probablemente satisfar\u00e1 tus necesidades. En nuestro caso, sin embargo, la migraci\u00f3n a <strong>SCSS<\/strong> le ha tocado el gordo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<p>En conclusi\u00f3n, aunque hay argumentos v\u00e1lidos para ambos <strong>SCSS y componentes con estilo <\/strong> en <strong><a href=\"https:\/\/thecodest.co\/es\/blog\/find-your-node-js-expert-for-hire-today\/\">desarrollo web<\/a> <\/strong>La decisi\u00f3n final depende de varios factores. <strong>SCSS <\/strong> ofrece una sintaxis m\u00e1s familiar para <strong>desarrolladores experimentados <\/strong> en CSS tradicional y ofrece una integraci\u00f3n perfecta con los <strong>bases de c\u00f3digo <\/strong> y <strong>bibliotecas de componentes <\/strong>.<\/p>\n\n\n\n<p>Por otro lado, <strong>Componentes estilizados <\/strong> ofrecen una mayor <strong>experiencia como desarrollador <\/strong> con su capacidad para encapsular estilos dentro de los componentes y simplificar el proceso de estilizaci\u00f3n. Adem\u00e1s, fomenta la modularidad y la reutilizaci\u00f3n del c\u00f3digo, lo que permite a los front-end <a href=\"https:\/\/thecodest.co\/es\/blog\/team-extension-guide-software-development\/\">ingenieros<\/a> para gestionar eficazmente la <strong>directorio de componentes <\/strong> y crear una interfaz de usuario coherente en todo el <strong><a href=\"https:\/\/thecodest.co\/es\/blog\/find-your-ideal-stack-for-web-development\/\">web<\/a> aplicaci\u00f3n <\/strong>. Teniendo en cuenta la importancia de <strong>usuario <a href=\"https:\/\/thecodest.co\/es\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">datos<\/a> <\/strong> seguridad y rendimiento, es crucial evaluar el impacto de ambos enfoques sobre el tama\u00f1o final del paquete y los tiempos de carga. En \u00faltima instancia, la elecci\u00f3n entre <strong>SCSS y componentes con estilo <\/strong> debe basarse en las necesidades espec\u00edficas del proyecto, el conjunto de competencias del <strong><a href=\"https:\/\/thecodest.co\/es\/blog\/how-to-hire-the-best-outsourced-development-team-for-a-scaleup\/\">equipo de desarrollo<\/a> <\/strong>y los objetivos generales de la <strong> aplicaci\u00f3n web <\/strong>. Es aconsejable que los desarrolladores eval\u00faen todos los factores, se mantengan actualizados a trav\u00e9s de <strong>entradas de blog <\/strong> y los debates del sector, y tomar una decisi\u00f3n informada que se ajuste a los requisitos de su proyecto y mejore el rendimiento general de la empresa. <strong>front-end <a href=\"https:\/\/thecodest.co\/es\/blog\/what-to-look-for-in-a-custom-software-development-company\/\">proceso de desarrollo<\/a> <\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Desde hace un par de meses, trabajo en un proyecto para uno de nuestros clientes. Cuando estaba en el principio, me enfrent\u00e9 a una elecci\u00f3n de la biblioteca para el estilo.<\/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\/es\/blog\/por-que-utilizar-scss-en-lugar-de-styled-components\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/blog\/por-que-utilizar-scss-en-lugar-de-styled-components\/\" \/>\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 minutos\" \/>\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\":\"es\",\"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\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/why-should-you-use-scss-instead-of-styled-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@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\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@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\":\"es\",\"@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\\\/es\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00bfPor qu\u00e9 utilizar SCSS en lugar de Styled Components? - The Codest","description":"Desde hace un par de meses, trabajo en un proyecto para uno de nuestros clientes. Cuando estaba en el principio, me enfrent\u00e9 a una elecci\u00f3n de la biblioteca para el estilo.","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\/es\/blog\/por-que-utilizar-scss-en-lugar-de-styled-components\/","og_locale":"es_ES","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\/es\/blog\/por-que-utilizar-scss-en-lugar-de-styled-components\/","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 minutos"},"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":"es","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":"\u00bfPor qu\u00e9 utilizar SCSS en lugar de 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":"Desde hace un par de meses, trabajo en un proyecto para uno de nuestros clientes. Cuando estaba en el principio, me enfrent\u00e9 a una elecci\u00f3n de la biblioteca para el estilo.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/why-should-you-use-scss-instead-of-styled-components\/"]}]},{"@type":"ImageObject","inLanguage":"es","@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":"es"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"es","@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":"es","@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\/es\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/posts\/3931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/comments?post=3931"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/posts\/3931\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/posts\/3931\/revisions\/8166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/media\/3932"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/media?parent=3931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/categories?post=3931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/es\/wp-json\/wp\/v2\/tags?post=3931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}