Integrando glamorous con ReactJS, Sass y Material Design
Motivación
Una de las librerías más increíbles que he tenido el gusto de utilizar es sin duda alguna, glamorous, descrita de la forma más simple que te puedas imaginar, según su sitio web:
Maintainable CSS with React
Como desarrolladores de ReactJS, para los neófitos y para los experimentados, el gran reto es como darle estilo a nuestros componentes manteniendo nuestro código limpio, usable y escalable, algo que realmente se convierte en un reto.
El principal reto está resumido en este texto que extraje directamente del sitio web de glamorous:
You like CSS in JS, but you don’t like having to create entire component functions just for styling purposes. You don’t want to give a name to something that’s purely style-related…
Una posible traducción es la siguiente:
Nos gusta CSS en Javascript, pero es molesto tener que crear funciones completas de componentes sólo para fines de diseño. No deseamos darle un nombre a algo puramente relacionado con el estilo…
Ya en un artículo anterior integré Sass con Material Design en un proyecto de React:
Quizá algunos se estén preguntando el porqué de esta integración si contamos con herramientas tan increíbles como styled-components y la que hoy abordaré en este artículo: glamorous.
La misma documentación de glamorous nos da la respuesta a esta interrogante:
Con CSS en JS, el objetivo es diseñar componentes y reutilizar esos componentes. Con esto en mente, si necesita aplicar estilo a toda su aplicación (como html / body o agregar algunos estilos de reinicio), no lo hará con glamour. En su lugar, puede usar CSS regular o usar la API de glamour para inyectar estilos globales.
Está claro que la idea es utilizar estilos que ya tenemos definidos y simplemente inyectarlos con glamorous.
Ahora, lo más importante, usaremos la integración que hicimos con Sass para reutilizar esos componentes de forma muy modular y tener un código base limpio y fácilmente escalable.
Integrando glamorous en un proyecto existente
Instalación
Ya que tenemos nuestro proyecto con Sass vamos a instalar glamorous de la siguiente forma:
npm install --save glamor glamorous
yarn add glamor glamorousIntegración y refactorización
Recordemos que en nuestro proyecto hemos creado los componentes por separado pero sin embargo hemos utilizado el archivo App.scss para agregar nuestros estilos directamente en nuestro código fuente.
Ahora haremos una limpieza exahustiva de ese código y lo volveremos más reutilizable y más modular.
Habíamos creado tres componentes Card, Grid y Header, como se muestra en el siguiente ejemplo:
Pero es demasiado código y demasiado uso de las clases, vamos a reutilizar esos componentes como lo que son: componentes sin estado y para presentación (presentational components).
Ahora vamos a separar todo y volverlo más semántico y reusable.
Abrimos el archivo ./src/components/Card.js y lo modificamos para que quede de la siguiente forma:
import glamorous from 'glamorous';
// Esta importación permite que solamente utilicemos
// los estilos del componente que requerimos en ese mismo
// componente
import './Card.scss';export const Card = glamorous.div('mdc-card my-card');
export const CardMedia = glamorous.div('mdc-card__media');
export const CardContent = glamorous.div('mdc_card__content');
export const CardAction = glamorous.div('mdc-card__primary-action');
Hemos importado un archivo de estilos, con scss, eso nos permitirá utilizar solamente los componentes que necesitamos, inclusive permitiéndonos una vez hayamos limpiado nuestro código eliminar el archivo
App.scss
Creamos un archivo Card.scss en la carpeta de ./src/components que contendrá lo siguiente:
@import '@material/card/mdc-card';.my-card {
padding: 10px 20px;
}
Esto es simplemente genial, estamos reusando de manera modular y simple el component card de material design.
Hemos utilizado el poder de ES6 para exportar cada modulo que creamos, eso quiere decir que debemos cambiar la línea import Card from './components/Card'; por lo siguiente:
import {
Card,
CardMedia,
CardContent,
CardAction
} from './components/Card';Ahora solo reemplazamos nuestro Card Component en nuestra aplicación, quedará de la siguiente forma:
<Card>
<h2 className="mdc-typography--title">
An awesome title
</h2>
</Card>// Se reemplazará por:<Card>
<CardMedia>
<CardContent>
<CardAction>
<h2 className="mdc-typography--title">
An awesome title
</h2>
</CardAction>
</CardContent>
</CardMedia>
</Card>
Y listo, testeamos nuestra aplicación y vemos exactamente lo que ya teníamos anteriormente:
Este proceso lo podemos repetir una y otra vez, hasta tener todos los componentes que utilizamos limpios y modulares, gracias a Sass y a glamorous.
El código fuente de todo el proyecto se encuentra en:
En la rama add-glamourous (perdón por el error de dedo) o en la versión v0.2.0 puedes clonar el repositorio para ver como funciona.
Conclusión y Notas
Glamorous es una tecnología impresionante, que nos permite añadir estilos de una forma realmente increíble y hacerlo directamente en nuestros componentes, reutilizar los estilos (como lo hicimos en este artículo), o añadir cambios directamente en los componentes, entre muchas otras increíbles cosas.
Puedes checar la documentación de glamorous en el siguiente enlace:
Pronto dedicaré una serie de tutoriales a enseñarte a utilizar glamorous en un proyecto completo.
Si te gustó el artículo no olvides seguirme para que estés al pendiente de nuestros próximos artículos.
¡Nota importante!
Este artículo solamente cumple el objetivo de enseñar la integración con glamorous y cómo usarlo de forma modular junto con Sass en ejemplos muy simples, para usos más avanzados haremos un artículo en otra ocasión.
En el código fuente se eliminaron las otras Cards dejando solamente una. En el artículo anterior se hizo esto con fines presentacionales.
En el último commit del proyecto, en la rama
add-glamorousse eliminó la clase .my-card deCard.scssy se utilizó glamorous para añadir los estilos directamente al componenteCard.
