Styled-components: ¿Amigo o enemigo?
Tags: react, css, styledcomponents, javascript
Published: 2023-04-25 06:15:20

[English version](https://dev.to/miasalazar/styled-components-friend-or-foe-1k53)

He empezado a utilizar [Styled-Components](https://styled-components.com/) recientemente para un proyecto y me ha parecido una increíble genialidad a ratos, y la cosa más rara de mundo en otros momentos. 

En este artículo voy a poner en una balanza mi experiencia empleando esta librería de React para intentar responder a una pregunta: ¿merece la pena usarlo o sus desventajas no superan las ventajas?.

**Contras**
- Esta librería solamente sirve para React, si deseas cambiar de framework deberás reescribir tus estilos.
- Barrera de entrada: Tienes que aprender a usarlo. Al principio puede ser confuso y componer estilos complejos puede generar dudas.
- Es más difícil de leer: Al no tener directamente los tipos de etiquetas que son cada elemento, es más complicado llevar la cuenta de qué estás usando, con lo que usar HTML semántico se hace más laborioso.
![Ejemplo de styled-components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7jo8jv3w2eejhe075dp.PNG)
- Los editores de forma natural no tienen autocompletado para Syled-Components.
- El CSS estático es mucho más rápido.
- CSS y SASS son más fáciles de emplear.
- Cuando queremos compartir estilos para varias etiquetas, la cosa se complica un poco. Aunque hay formas de hacerlo, [entre otras] esta (https://stackoverflow.com/questions/49618997/idiomatic-way-to-share-styles-in-styled-components): 
![Ejemplo de estilos comunes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anrhpc5ziudj0e9f3p0h.PNG)
- Añadir estilos a elementos de librerías no es tan sencillo.
- Es más difícil ver en las herramientas de desarrollo cuál es cada componente y es más tedioso debuggear.

**Pros**
- Aunque no tiene autocompletado de forma natural, puedes instalar una extesión para que sí lo tengas, al menos para [visual studio code](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components).
- Para mejorar la legibilidad del código, se puede indicar que dicha etiqueta es un estilo añadiendo al final del nombre "styled" o "styles", y también se pueden usar nombres descriptivos. Por ejemplo, para añadir estilos a un input, puedes llamarlo `InputStyled`, o para un div que funciona de contenedor, `WrapperStyled`.
- Las medias queries funcionan exactamente igual que en el CSS normal. No obstante, recomiendo este artículo con [buenas prácticas](https://www.mariokandut.com/how-to-use-media-queries-in-styled-components/).
- Soluciona los problemas de especificidad de CSS. Además, los nombres de clases no entran en conflicto, Styled-Components crea nombres de clase únicas.
- Los Styled-Components facilitan usar los temas por colores.
- Es MUY fácil crear estilos dinámicos y crear componentes reutilizables.
![Ejemplo de estilos dinámicos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tcpqgxwl3q7n8n8gacq.PNG)
- Puedes usar la sintaxis de SASS sin necesidad de tener SASS instalado.

**Conclusiones**
Cuando empecé a usarlo confieso que me costó coger de qué iba todo esto, y todavía creo que la sintaxis se me hace muy extraña. Asimismo, soy una persona que le da mucha importancia a crear HTML semántico, por lo que a veces es muy molesto mantener el control de las etiquetas que estás usando y asegurar que la estructura tenga sentido.

No obstante, creo que si tienes una plataforma que utiliza muchos componentes reutilizables y que puede necesitar crear estilos condicionales, esta librería es SÚPER úitl. En muchas ocasiones me ha sucedido tener que modificar los estilos en función de ciertas circunstancias, y con Styled Componentes suele ser algo súper sencillo e intuitivo cuando ya has aprendido a usarlo.

Para resumir, para proyectos cortos y poco complejos, usarlo creo que es un poco overkill. Sin embargo, para plataformas más complejas y con componentes reutilizables, puede ayudarte a ahorrarte mucha complejidad y tiempo.