React: componentes con Styled Components

En el 2018 yo comencé a trabajar con Styled Components. En el comienzo yo tuve mucho prejuicio, siempre quedaba reclamando, diciendo que no entendía bien cómo usar y hoy en día yo prácticamente no me imagino haciendo un proyecto nuevo utilizando React sin usar esa maravilla. La idea de este post es compartir un poco de mi experiencia e intentar convencerte de probar esa biblioteca que puede ayudarte a resolver varios problemas comunes que tenemos.

El comienzo es extraño

Para quien ya trabaja hace tempo con Front-End, es bien común ya estar acostumbrado a pensar en trabajar con el CSS enfocando en reutilización encima de algún patrón, como BEM, SMACSS, etc…

Lo que para concluir las tareas del día a día nos lleva a escribir un código que sigue esa linea:

Y eso hace todo el sentido, funciona super bien y muchos proyectos son estructurados así, ese estilo de organización ganó mucha fuerza, luego cuando el SASS y su grupo de preprocesadores fueron siendo lanzados.

Pero en el mundo del desarrollo nada para y las cosas siguen evolucionando y en ese ritmo de lanzamientos esa estrategia fue portada para los Single File Components del Vue

https://vuejs.org/v2/guide/single-file-components.html

Lo más interesante de ese enfoque, es que destruimos todo lo que aprendimos en las bases del Front-End que es dejar cada cosa en su canto y juntamos todo en una cosa sola. Pero muchas veces acabamos no reflexionando por ser eso algo tan difundido. El estallo para mi vino cuando yo hice un componente de acordeón, y vi que era mucho más fácil de ver toda la lógica del componente, su estilo y cuál era el markup (html) que estaba sirviendo de base para el componente.

Conociendo esa maravilla

Si fuéramos a parar para analizar, básicamente todo componente que creamos en una página va a tener estructuras en común: Uno o más "wrappers", los elementos hijos que componen el componente en cuestión y en caso sea algún componente con lógica y state necesitaremos tener una estructura para usar los hooks o mismo la estructura de clase del React.

Si fuéramos parar para mirar el ejemplo arriba donde yo tengo un contador de su estructura, podemos ver que prácticamente todos los componentes aquí son visuales, menos el que controla la lógica, y si fuéramos a crearlos con styled components nuestro código quedaría así:

Lo que es visual tiene su creación abstraída y simplificada para nosotros y lo interesante es que la API del styled components da soporte para todas las etiquetas ya conocidas del HTML.

¿Cómo extender estilos?

En este momento te puede haber gustado el código anterior y entendido más o menos como pensar en styled components, pero para quien escribe CSS, la reutilizacion allí puede haber quedado medio nublado de como puede ser hecho, para eso vamos a pensar en el caso donde ya tenemos un componente creado como un botón.

En caso tengamos el interés de aprovechar todos los estilos y apenas cambiar el background, necesitamos solamente hacer eso aquí

Una idea super importante aquí en la parte de reutilizacion, para que el desarrollo sea divertido, es recomendado hacer un mapeamiento de los layouts de su proyecto cuando fuera a trabajar, así evitas quedar haciendo cosas muy repetidas y trabajar solamente extendiendo cuando necesario encima de una base sólida.

¿Es posible trabajar con valores dinámicos?

Siempre que quisiéramos hacer algún estilo ser condicional, podemos pasar propiedades para el componente como en el ejemplo abajo y el estilo será adicionado solamente cuando el resultado esperado suceda:

<AccordionContentArea accordionState={accordionState}>

        <p>lorem ipsum sit dorme amet...</p>

      </AccordionContentArea>
const AccordionContentArea = styled.article`

  border: 1px solid rgba(0, 0, 0, 0.125);

  padding: 0.75rem 1.25rem;

  ${({ accordionState }) => accordionState && `display: none;`}

`;

Entendiendo las ventajas

Trabajando con variables y valores del propio JS

A mi parecer una de las principales ventajas que tenemos aquí es con toda seguridad lo practico de poder tener un archivo JavaScript con objetos definiendo colores, valores patrones, breakpoints y etc… la flexibilidad del uso de un lenguaje de programación que de hecho va a rodar en el browser acaba trayendo una flexibilidad mayor que un preprocesador puede acabar no ofreciendo, y aun quedar todo más organizado que si trabajáramos con las custom properties nativas del CSS que aun son un poco complicadas de mantener principalmente en el punto de la experiencia de desarrollo donde queda complicado encontrar valores y otras cosas comunes que hacemos con variables en lenguaje de programación de verdad.

Menos Dead Code

Otro punto fantástico de los Styled Components es que como la parte visual es resultante de un componente, siempre que necesitamos eliminar un código va ser fácil saber donde están todas sus referencias removiendo todo por completo, lo que con CSS queda más difícil pues es complicado que tengamos un mapeamiento de lo que está siendo trabajado en cima de un selector global que hacemos, es posible hacer, usando algo como el BEM pero exige un esfuerzo.

Mismo que hoy tener CSS escopado no sea una novedad, ese es un otro punto super interesante tener lo que el CSS Modules hace de forma nativa con la biblioteca, en cada componente alivia bastante la carga de lidiar con estilos globales.

Server side render

Un último punto que es bien interesante es que, el styled components intenta adivinar lo que sería el contenido above the fold de su sitio y extraer ese CSS para el head, haciendo que descargue más rápido la parte crítica de renderización trayendo resultados bien interesantes en el desempeño.

Desventajas que con seguridad tendremos escogiendo usar el Styled Components

El acoplamiento con la tecnología es algo que tu tienes que estar consciente, si todo tu sitio fuera hecho con styled components, él con seguridad puede traer una carga cognitiva inicial para quien fuera a trabajar en el equipo y no conoce, principalmente por el hecho de tener un enfoque radicalmente diferente de las más comunes que citamos anteriormente como trabajar con algún preprocesador o los single file components del Vue.

Un otro punto que es importante hablar aquí es que puede parecer que estamos repitiendo mucho más de lo que es necesario, conforme vamos desarrollando el proyecto, por eso resalto la importancia de intentar definir bien los rumbos de la interface previamente para tener por lo menos una noción general de componentes principales como títulos, botones, menús entre otros...

Para saber más acerca de este tema les invitamos a conocer el curso de React: Utilizando Styled Components en la plataforma de Alura Latam

Puedes leer también:

• HTML, CSS y Javascript, ¿cuáles son las diferencias?
• Aplicando progressive enhancement
• Empezando a organizar tu CSS