PostCSS: ¿Qué es? ¿es mejor que SASS, LESS, Stylus?

PostCSS ha entrado con mucha fuerza este año 2015 en el mundo del desarrollo CSS. PostCSS es una herramienta que «transforma código CSS mediante plugins de JavaScript», pero no es una herramienta más… puede hacer «más cosas» que pre-procesadores tipo SASS, LESS, Stylus… pero de forma modular, es decir es más rápido, y solo consume lo que uses.

¿Es mejor que SASS, LESS, Stylus? Por si solo no hace nada…, pero usándolo con determinados plugins llega ha ser una herramienta más completa. Si estas pensando en iniciarte en el mundo de los pre-procesadores CSS o simplemente quieres darle una oportunidad, para mí es una de las herramientas de que más me ha gustado ultimamente.

Me gusta:

1. Puedes usarlo junto con herramientas de Automatización de tareas (gulp, grunt…) por lo que ademas de crear CSS, podemos hacer al mismo tiempo otras cosas desde la misma consola, como unir archivos js, minificar código, comprimir imagenes, etc…
2. Es modular, solo usa lo que instalemos, y por el orden que lo hagamos haciéndolo más potente y rápido.
3. Hay una gran colección de plugins con los que puedes hacer cosas que no puedes con los pre-procesadores actuales (más abajo dejo un ejemplo).
4. Puedes crear tus propios plugins fácimente en javascript, si así lo necesitas.
5. Puedes usarlo con archivos css «normales», pero también usando el plugin que toque con archivos de otros pre-procesadores (sass, less, stylus…). Es decir, si te gusta escribir en SASS, puedes hacerlo igualmente, pero también puedes luego utilizar otros plugins con otras funciones.
6. Es usado por Google, Shopify, Twitter, Bootstrap, Codepen… por lo tanto, algo bueno tiene que tener.
7. 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 lso respectivos prefijos.

No me gusta:

1. El logo :O
2. Posiblemente haya más cosas, si.

Sin hacer el artículo demasiado largo, solo quiero puedas conocer algunas cosas que puedes llegar a desarrollar con PostCSS.

Algunos Plugins:

Hay muchos, más adelante escribiré los que considero más interesantes.

Autoprefixer

Este plugin es una caña, ya que puedes escribir código css3  y el solo te lo transforma luego con los diferentes prefijos (-webkit, -moz, etc…). Es decir no hace falta escribir código inventado rollo @include bla,bla.. como haces en SASS para usar mixins de ese tipo solo para lo que es crear prefijos de propiedades de CSS. Ya solo por esto puede merecer la pena.

/* Escribes */

.cabecera {
  position:relative;
  margin:0;
  transition: all 1s;
}

/* Resultado */

.cabecera {
  position:relative;
  margin:0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;  
  transition: all 1s;
}

CSS MQPacker

Con este plugin puedes escribir código de media queries por diferentes partes del archivo y al procesarlo te las imprime todas agrupadas al finalizar el archivo CSS. Ejemplo:

/* Escribes */

.cabecera {
  width: 100%;
  @media (min-width: 460px) {
    width: 50%;
  }
}

.pie {
  width: 100%;
  @media (min-width: 960px) {
    width: 50%;
  }
}

/* Resultado */

.cabecera {
  width: 100%;
}

.pie{
  width: 100%;
}

@media (min-width: 960px) {

  .cabecera {
    width: 50%;
  }

  .pie {
    width: 50%;
  }

}

Conclusión:

¿Merece la pena abandonar SASS, LESS, Stylus… por PostCSS?
Aquí al gusto de cada uno, pero lo que comentaba antes, no hay porque abandonar si te gusta la escritura de tu pre-procesador actual, hay plugins para cada uno.
Si estas cansado de escribir código inventado rollo mixins… y quieres escribir código real, PostCSS + CSSNext + Plugins es tu herramienta.
Yo particularmente me gusta mucho SASS en su conjunto, y combinado con Gulp + Autoprefixer es para mi la herramienta perfecta a día de hoy.

El próximo post será ya más práctico con ejemplos de instalación y primeros pasos con PostCSS.