English version

He empezado a utilizar Styled-Components 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.
• 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):
• 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.
• 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.
• 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.
• 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.