Hoy vamos a hablar de PostCSS, algo de lo que últimamente se lee y se escucha hablar cada día con más fuerza en la comunidad de desarrolladores FrontEnd y que está revolucionando nuestra manera de trabajar con las hojas de estilo.
Simplemente como consejo, os diría que no tardéis mucho en investigar y aprender sobre PostCSS, porque una vez que asimiles su funcionamiento y descubras su potencial seguramente no quieras dejar de usarlo para tu trabajo a diario.
Solo para que os hagáis una idea de cómo PostCSS está irrumpiendo en el mundo CSS os diré que hasta Mark Otto (creador del famoso framework Bootstrap) ha hablado que la versión 5 de Bootstrap se escribirá en PostCSS.
PostCSS no para de crecer, pero lo sorprendente es que ese crecimiento está siendo espectacularmente rápido. Se ha convertido en una herramienta usada por Google, Twitter, Bootstrap, Codepen, entre muchos otros.
Pero, ¿qué es PostCSS para ser tan maravilloso?
Por el nombre, nos puede llevar a pensar es que sea un "preprocesador" más con Less, Sass o Stylus, pero no lo es. También podría hacernos creer que es un “postprocesador”, pero tampoco lo es. Realmente no es fácil categorizarlo, ya que su rango de funcionalidad es ilimitado, incluso, podemos crear nuestros propios plugins personalizados para realizar las modificaciones que deseemos en nuestro código CSS.
Por todo esto, la mejor forma de definirlo es como lo expresan en la propia página en GitHub del proyecto:
"PostCSS es una herramienta para transformar CSS con plugins de JavaScript"
Así, en pocas palabras, podemos decir que con PostCSS podremos hacer con nuestro css lo que queramos y se nos ocurra simplemente usando los plugins adecuados.
Explicando de forma breve y clara lo que hace PostCSS es analizar el código CSS y transformarlo en un AST (árbol de sintaxis abstracta) que luego nos permite modificar mediante plugins Javascript.
Características principales por las que PostCSS destaca
- Está preparado para integrarse con muchas herramienta de desarrollo como herramientas de automatización de tareas: gulp, grunt, webpack, Broccoli, Brunch, ENB, Fly, Stylus, Meteor, Duo y Connect/Express.
- Es modular, lo que significa que te permite utilizar solo lo que necesitas, lo que instalemos será lo único que usa, teniendo en cuenta el orden en el que lo hagamos, lo cual hace que sea más potente y rápido. Por ejemplo, ¿queremos seguir usando SASS? pues instalas un plugin y ya puedes usarlo.
- Se ha generado una gran comunidad de desarrolladores que hacen sus contribuciones, con lo que existe ya una gran colección con multitud de plugins de todo tipo, que nos permiten hacer cosas que no podemos con los pre-procesadores actuales. Las posibilidades que nos ofrece postCSS son casi infinitas. En postCSS.parts encontramos un catálogo de plugins con una breve descripción de lo que hacen.
- Puedes crear tus propios plugins fácilmente en javascript, si así lo necesitas.
- Puedes usarlo con archivos css “normales”, pero puedes, por ejemplo, usar pre-procesadores (sass, less, stylus…) simplemente usando el plugin correspondiente. O lo que es lo mismo, si te gusta SASS, puedes hacerlo sin problemas, pero también puedes luego utilizar otros plugins con otras funciones.
- Usado con el plugin CSSNEXT puedes adelantarte unos años y empezar a escribir el código css del futuro (con variables, y demás características), pero te lo compilará al CSS actual con los respectivos prefijos.
- En cuanto a rendimiento, PostCSS es increíblemente rápido (hasta 3 veces más rápido en comparación con less o stylus), solo hay que mirar los datos:
Podéis ver los resultado aquí
Algunos de los plugins y packs más potentes y conocidas y que os recomendamos son:
- Autoprefixer
- PreCSS
- CSSNEXT
- atImport
- preCSS
- nested
- postcss-round-subpixels
- Pixrem
- pxtorem
- postcss-at2x
- postcss-bem-linter
- ...
Aunque ha sido muy por encima lo que os hemos explicado de las maravillas de PostCSS y sus plugins, os invitamos y animamos a probar esta increíble herramienta lo antes posible y seguro que os terminará enganchando: