PostCSS: El futuro de CSS

¿A qué dirección apunta el front?

El desarrollo de frontend es muy fluctuante, cambia a pasos agigantados en un periodo de tiempo relativamente pequeño, cada día sale al mercado un nuevo framework que promete convertirse en el “principal”, los desarrolladores de frontend tenemos un gran reto al elegir cual es la tecnología en la que debemos especializarnos, sin embargo, existe una dirección a la que todas estas tecnologías parecen apuntar, la modularización, que cada día toma más relevancia, armar una aplicación con pequeños fragmentos de código, lo que ha significado un gran avance a la forma de escribir el software del lado del cliente, creando un código que resulta más fácil de digerir y reutilizar.

Divide y vencerás

Un ejemplo de modularización lo podemos ver con los módulos de NPM y sus dependencias o frameworks como React o Vue con sus componentes. Por otro lado también tenemos  webpack, que no es más que un empaquetador de módulos, que se encargará de recibir todos estos componentes para que converjan en un solo archivo, facilitando la utilización del código modular. En el proceso de modularización es muy importante el reciclaje del código, el desarrollo modular no tendría sentido si no pudieras reutilizar los componentes.  La razón de un módulo de NPM es ser un fragmento de código que pueda ser utilizado en cualquier proyecto en el que encaje, la razón de webpack es tomar todos los módulos que estés utilizando y ayudarte a tener un mejor manejo de ellos, la razón de React y Vue es que puedas reutilizar componentes múltiples veces en la aplicación.

El CSS del mañana

Hablando de desarrollo modular, CSS no podía quedarse atrás. En el  mercado existen múltiples ofertas que permiten escribir una mejor hoja de estilos para tus aplicaciones, una de ellas es PostCSS.

PostCSS nace en el 2012 con la primicia de “Transforma CSS con JavaScript”, y a través de sus plugins te permite añadirle N cantidad de funcionalidades a tus hojas de estilos, entre ellas manejar múltiples módulos de CSS para que converjan a una sola salida, o garantizar al desarrollador que el código de su hoja de estilos va a ser soportado en todos los navegadores sin la necesidad de utilizar prefijos, también permite poder utilizar variables (muy importantes a la hora de recordar códigos RGB, RGBA o HEX), además de ser capaces de  importar una hoja cada vez que sea necesario, crear tus propios queries, tus propios selectores, utilizar métodos dentro de CSS, además de una serie de funcionalidades de las cuales hablaremos luego.

Crea tu primera aplicación utilizando el CSS del mañana.  

Ahora saltemos al código, crearemos nuestra primera aplicación utilizando PostCSS, vamos a crear la maquetación de un juego de “Simon Says” (al que le daremos vida utilizando Reactjs luego) y sus estilos van a estar escritos utilizando PostCSS.

Simon Says es este juego donde un círculo cuenta con cuatro botones que siguen un patrón en el que se encienden y luego el jugador debe repetir éste patrón, en este caso le llamaremos el “3DVSays”.

Materiales y configuración

Sólo necesitaremos utilizar Codepen, si quieres ver el resultado final, puedes ver todo el código acá.

Al principio tendremos una pantalla así:

Ahora, empecemos a dar forma a nuestro 3DVSays, lo primero que haremos será crear en la caja de HTML un contenedor con cuatro divs en su interior, donde cada div tendrá a su vez otro en su interior y les agregaremos sus respectivas clases:

Lo siguiente será agregar PostCSS en nuestro Pen, así que nos vamos al botón de configuración en la caja de CSS y lo agregamos:

Ahora, recordemos que anteriormente hablamos de los plugins de PostCSS, que son estas increíbles herramientas que te permiten agregarle más funcionalidades a tu hoja de estilos, puedes revisar cuantos plugins existen acá, uno de los plugins más utilizados es  css-next, ya que le facilita el trabajo al desarrollador al traer por defecto los plugins básicos para poder sacarle provecho a PostCSS, de esta forma es un gran aliado al no tener que preocuparte por cuales son los plugins con los que debes empezar a trabajar en un principio; su slogan es “Utiliza hoy el CSS del mañana”.

Ahora agregaremos ese plugin a nuestra hoja de estilos para poder darle funcionalidad. Bastará con escribir lo siguiente:

Añadiendo los estilos de nuestro 3DVSays

Como PostCSS nos permite utilizar variables vamos a declararlas, para no tener que preocuparnos por el código del color que vamos a utilizar:

Como ves, sólo tenemos que declararlas dentro de un selector llamado root, y la sintaxis por la cual deben iniciar sus nombres son dos guiones.

Ahora agreguemos esos colores como background a cada div cuya clase sea la misma que el color.

Y tendremos algo así, fíjate que la manera de llamar a la variable dentro de root es con un método llamado var.

Ahora bien, no son sólo códigos de colores los que podemos almacenar en nuestras variables, también podemos almacenar clases, se me ocurren varios estilos que se van a repetir en nuestros botones, así que los voy a almacenar en una variable y luego la añadiré a cada clase.

De esta manera creamos una clase como variable.

Ahora voy a aplicarla a cada clase de CSS con un parámetro de css-next, “@apply”.

“@apply” nos sirve para añadir esa variable de PostCSS a nuestra clase.

A continuación, voy a añadirle los estilos a la clase Container y a la clase Black para que nuestro Simon Says vaya tomando forma.

Una de las cosas que ofrece PostCSS es la identación del código, esto quiere decir que si estamos escribiendo los estilos de un componente padre y queremos escribir el estilo de su hijo podemos hacerlo dentro de la misma clase del padre, y de esta manera podemos sobreescribir una clase utilizando el scope en el que se encuentra el componente que la recibe de una manera muy sencilla.

Veamos esto en código utilizando los sub botones que hemos escrito en nuestro HTML y además terminemos de agregar los estilos de cada botón.

 

Así van a quedar las clases de nuestros botones, simplemente agregando un símbolo de ampersand y el nombre de la clase podemos crear la identación de los estilos. Ahora bien, podemos ver que existen estilos que se repiten en los sub botones, ¿por qué no agregamos los estilos a una variable y utilizamos @apply para agregarlos a cada clase?, eso te lo voy a dejar a ti, si tienes algún problema puedes revisar las imágenes anteriores donde lo hacíamos con los botones o el código del resultado final.

Ahora apliquemos tres conceptos super interesantes que vienen con PostCSS, uno de ellos son los selectores personalizados, si quisiéramos llamar a múltiples elementos dentro de un elemento, por ejemplo los <h2></h2> que estén dentro de un elemento podríamos utilizar un selector personalizado, en nuestra aplicación lo utilizaremos para llamar al componente de clase Black dentro de Container.

Nos quedaría algo así:

Para crear un selector personalizado sólo necesitamos anteponer la palabra customer-selector, luego nombramos al selector, le agregamos su estilo y para llamarlo se utilizan los dos puntos que se utilizan para llamar a cualquier selector seguido del nombre de la variable.

También podemos agregar pseudoclases identadas, si quisiéramos que cada botón se iluminara cada vez que se le hace click podríamos hacerlo de la misma manera que utilizamos la identación para sobreescribir la clase de los componentes hijos:

Para finalizar y pulir el último detalle, agreguemos el logotipo de nuestro 3DVSays y sus estilos:

 

Y ya hemos finalizado la maquetación de nuestro 3DVSays, has escrito los estilos de tu aplicación utilizando PostCSS por primera vez, de ahora en adelante podrás modularizar los estilos de tus aplicaciones y añadir las funcionalidades que desees, podrás escribir el CSS del mañana.