¿Qué es PostCSS? Introducción

El mundo del desarrollo web está viviendo un momento de cambios constantes, quizás el momento álgido desde el inicio de la programación. La Hoja de Estilo en Cascada, más conocida por todos como CSS, veinte años después de su lanzamiento, está viendo cómo “algo nuevo” puede ocupar su lugar, o al menos, hacerle la competencia. Pero ¿debe temer CSS por su existencia? Nada más lejos…

PostCSS llegó hace unos años, pero no ha comenzado a implementarse en la web hasta hace pocos meses. El crecimiento que ha tenido en descargas en los últimos 24 meses ha sido vertiginoso y todo hace indicar que seguirá aumentando, dadas las posibilidades que ofrece. De hecho, en 2014 se produjeron 1,4 millones de descargas, y tan solo en los seis primeros meses de 2015 se elevó la cifra a los 3,8 millones.

Definición

Pero conozcamos más a fondo qué es PostCSS. El equipo creador en su perfil de Github propone esta definición:

"PostCSS es una herramienta para transformar CSS con plugins de JavaScript". Estos plugins pueden soportar variables y mixins, transpilar la futura sintaxis de CSS, imágenes en línea y más.

Por tanto, PostCSS se alimenta de CSS y lo transforma en una serie de datos que JavaScript puede manipular. Mediante plugins basados en JavaScript para CSS manipula el código. Pero PostCSS no cambia el código, solo hace que los plugins puedan cambiarlo. Con PostCSS no hay límites de manipulación; si puedes pensarlo, puedes escribir el código de un plugin para realizarlo. Pero si no quieres pensarlo, aquí te dejamos una lista de tareas que pueden hacer los plugins:

• Comportarse como preprocesadores (SASS, LESS, …).
• Optimizar y añadir prefijos al código y añadir la futura sintaxis.
• Supervisar el código.
• Procesar variables y lógica.
• Proporcionar sistemas de columnas, atajos de código.

Y un sinfín de acciones más que nos harán más sencilla la manipulación de nuestro CSS.

¿Proprocesador? ¿Postprocesador?

Llegados a este punto, podemos pensar, de forma errónea, que PostCSS se trata de un preprocesador. Hay muchos desarrolladores que están dejando de utilizar los preprocesadores y ahora trabajan con PostCSS. Otros, al contrario, prefieren seguir usando solo el preprocesador. Pero lo cierto es que se pueden utilizar en conjunto, preprocesadores y PostCSS.

También el prefijo “post” del nombre nos puede llevar a pensar que se trate de un “postprocesador”. Pero volveríamos a caer en el error, porque en el post proceso se incluyen tareas como tomar una hoja de estilo finalizada y validarla, comprimirla y procesarla. Y como vimos antes en la lista inacabada, PostCSS hace mucho más que eso. Una gran definición la escribió en Twitter el desarrollador de plugins Maxime Thirouin:

“Ningún contribuidor de PostCSS usa ya esa expresión (postprocessor). Ahora es PostCSS como ‘CSS y más allá’”.

@HugoGiraudel nobody in postcss contributors is using this expression anymore. Now it is Postcss like "css and beyond"

— Maxime Thirouin (@MoOx) 21 de julio de 2015

¿Por qué destaca PostCSS?

Lo que hace realmente especial a PostCSS es la enorme diversidad de plugins y las funcionalidades que ofrece. Hay, desde plugins para soportar antiguas o futuras sintaxis, hasta otros que gestionan colores o grids al estilo de Bootstrap, herramientas de optimización, plugins que añaden atajos, … Otra de las grandes peculiaridades que defienden los usuarios de PostCSS es que se trata de una herramienta modular, es decir, podemos utilizar los plugins que necesitemos, y los que no, no se cargan.

Si tu intención es utilizarlo como preprocesador y nada más, puedes hacerlo. Si por el contrario quieres que sea un postprocesador, también. O puede que prefieras que PostCSS mejore y limpie tu CSS, también lo puedes hacer. Y si quieres que haga todo eso, y mucho más, usa los plugins disponibles. Recuerda que no hay límites. Por suerte, la modularidad de PostCSS es fina, por lo que no existen plugins enormes que traten con muchas funciones. Un plugin se crea para una función, y si quieres más funciones, se ensamblan los plugins en un paquete de forma que permitan hacer lo que desees.

Como ejemplo, puedes utilizar varios plugins de extensiones del lenguaje para hacer tu propio preprocesador, o bien puedes descargar y utilizar el paquete PreCSS que ha creado un usuario y está disponible en su perfil de Github , donde podrás tener acceso a multitud de plugins de extensión del lenguaje de una vez. Tienes infinitas posibilidades, pero lo mejor de todo es que solo utilizas lo que quieres, evitando así cargar de peso la web con plugins innecesarios.

[BANNER_SUSCRIPCION]

Más rápido que cualquier otro preprocesador

Las dos principales razones por las que PostCSS es más rápido que sus principales competidores son que, en primer lugar, carga en JavaScript, y en segundo lugar, que carga los plugins que le interesan al usuario, siendo posible cargar por ejemplo solo uno. Este experimento lo puedes hacer aquí , aunque te mostramos los resultados en la siguiente imagen:

Preprocesadores

libsass: 77 ms (1.9 times slower)

Less: 142 ms (3.4 times slower) Stylecow: 259 ms (6.2 times slower)

Cualquiera puede hacer plugins para PostCSS

Siempre que sepas escribir código en JavaScript, puedes crear plugins para PostCSS. Esta es una cualidad muy interesante porque permite a la comunidad nutrirse de innumerables plugins. Posiblemente la idea que tengas en la cabeza que deba hacer un plugin, ya esté realizada, por lo que nos ahorra muchísimo tiempo. En github o Stack Overflow hay infinidad de plugins para trabajar con PostCSS que invitan a utilizar esta herramienta, si aún no nos había convencido. Pero alguien se ve capacitado para hacer su propio plugin, ¡adelante!

Es cierto que preprocesadores como LESS, SASS o Stylus facilitan mucho el trabajo de los desarrolladores. Pero estas herramientas proporcionan una serie de características que suponen que son las que el usuario medio necesita. Pero son muchísimos los desarrolladores, y muchísimas las formas de trabajar, por lo que una nueva herramienta como PostCSS tan manipulable y editable proporciona más posibilidades a los profesionales.

¿Quieres probar PostCSS?

Si tienes interés por aprender a trabajar con PostCSS y conocer las virtudes de esta herramienta, lo puedes hacer en el editor online Codepen.io .