Mis primeros pasos con postCSS

Desde este verano llevo utilizando postCSS, al principio junto a SASS y ahora casi sin el, lo de casi sin el es porque gracias a uno de los tantos plugins que tiene postCSS sigo utilizando la sintaxis de SASS. Si bien es cierto que por ahora solo utilizo postCSS en los proyectos donde trabajo solo.Son proyectos que tampoco llevan muchísima carga de CSS, así que mi experiencia por ahora esta limitada a este tipo de proyectos, y no a ninguno que conlleve un gran desarrollo de CSS. Y como muestra la nueva version de SVG-FILTERS(que esta casi a punto de salir) en la que he escrito todo el CSS usando postCSS, también lo he utilizando en el último proyecto para un cliente que todavía no puedo hacer público pero que verá la luz en breves ;)

¿Que es postCSS?

El nombre de postCSS nos engaña, y nos lleva a pensar de que estamos ante un postprocesador o preprocesador. Simplemente es una herramienta para transformar tu CSS a través de JavaSript.

It is time admit my mistakes. “Postprocessor” term was bad. PostCSS team stoped to use it.https://t.co/vs2AiXGoJy

— PostCSS (@PostCSS) July 28, 2015

Métodos de uso

Podemos utilizar postCSS desde Grunt, Gulp, webpack, Broccoli, Brunch, ENB, Fly, Stylus, Meteor, Duo y Connect/Express. Aunque en este artículo me voy a centrar en la manera que lo uso, y es desde Gulp. Si esto os suena a chino, la gente de frontEndLabs tiene los mejores artículos sobre Gulp, primeros pasos y plugins y configuraciones.

Modular

Lo mejor y también lo peor de postCSS es que te puedes construir tu propio framework como tu prefieras. Una de las razones de pasar de SASS a postCSS es que con SASS siempre he tenido la sensación de no utilizar ni la mitad de las cosas que me ofrece. Esto más que un problema de SASS es mi problema. La ventaja de postCSS es que yo elijo lo que quiero utilizar, ¿quiero utilizar la sintaxis de SASS? uso un plugin, quiero hacer hacks para dar soporte a navegadores que usan cinco personas y se comen todas la mitad de la horas de un proyecto, pues también. Pero tanta personalización también puede ser un problema cuando tu no vas ser la única persona encargada de escribir CSS en un proyecto, si son varias personas entramos en problemas, ya que cada uno tiene sus manías y sus vicios. El plugin que te a ti te puede parecer la hostia al otro le puede parecer una chatarra. Así que esto puede ser un handicap, aunque hablando se entiende la gente también hay que ser realista y pensar en el futuro.

Rendimiento

Los números no mienten, postCSS simplemente vuela en comparación con prepocesadores como LESS, SASS etc…

Podéis ver los resultados de los benchmark’s en el GitHub de postCSS

Utilizando postCSS con Gulp

Lo primero que vamos a hacer es instalar postCSS. Abrimos nuestro terminal en la ruta de nuestro proyecto.

$ npm install --save-dev gulp-postcss

Una vez instalado vamos a añadir postCSS a nuestro gulpfile.js

var postcss = require('gulp-postcss');
var gulp = require('gulp');

gulp.task('wizard', function () {
    var processors = [
        //Aquí irán los diferentes plugins que vamos añadiendo
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dist'));
});

Los source maps viene desactivados por defecto. Para activarlos añadiremos dos líneas en nuestro gulpfile.js

return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist'));

Plugins

Las posibilidades que nos ofrece postCSS son casi infinitas. Y otra de las cosas por las que recomiendo postCSS es por toda la gente que hay detrás creando plugins para todo. En postCSS.parts podéis encontrar un catálogo con multitud de plugins acompañados de una breve descripción de lo que hace cada plugin.

Si dominais JavaScript y tenéis una idea también podeis crear vuestros propios plugins.

Ahora voy a explicar cada uno de los plugins que uso.

atImport

Para utilizar @import tanto con archivos locales, node modules o bower packages.

http://webdesign.tutsplus.com/tutorials/using-postcss-for-minification-and-optimization–cms-24568

atImport

precss

Abandone SASS pero no algunas de sus cosas, esto es por lo que decía al principio del artículo que no había terminado de abandonar SASS. Con preCSS podemos utilizar variables, condicionales, mixins y muchas de las cosas que nos da SASS.

preCSS

Nested

Si de SASS solo queréis usar el anidamiento de selectores este plugin es perfecto.

nested

Nesting W3C

Un plugin para anidar como el draft de la W3C

Nesting

Rucksack

Rucksack nos proporciona una cantidad de shorthand que nos facilitan la vida. Y también la poderosa y peligrosas opción de crear @alias propios. Asegurate de que nadie más tocara este CSS.

Rucksack

Autoprefixer

El archiconocido por todos autoprefixer que nos ahorra el sopor de escribir todos y cada uno de los prefijos de los navegadores.

Autoprefixer

pxtorem

Para aquellos duros de mollera como yo que siguen utilizando los pixels este plugin es simplemente perfecto. A continuación vamos a ver la configuración.

pxtorem({
    //Definimos el valor que le queremos dar al REM
    root_value: 16,
    //La precisión decimal
    unit_precision: 2,
    //La lista de propiedades que queremos que transforme de pixels a REM.
    prop_white_list: ['font', 'font-size', 'line-height', 'letter-spacing', 'margin', 'padding']
}),

pxtorem

stylelint + reporter

Un linter para comprobar los errores que cometemos al escribir nuestro CSS. Para ver los errores en la consola hay que utilizar gulp-reporter.

Por cierto Stylelint Se puede usar sin postCSS.

Stylelint

Sublime Text

Para que os reconozca la sintaxis que estais utilizando al escribir CSS con postCSS debereis descargaros desde el package control Syntax Highlighting for PostCSS.

Si utilizáis Atom también tenéis otro plugin para añadir la sintaxis de postCSS Atom PostCSS language

CodePen

If you'd like to play around with @PostCSS, we have it on @CodePen now.

All 'bout it: http://t.co/uwjp1XlB3P

— Chris Coyier (@chriscoyier) July 14, 2015

Una buena manera de empezar a trastear con postCSS es a través de CodePen. Tenemos una serie de plugins que ya vienen en la pestaña de CSS.

Codemotion

Si tenéis la suerte de ir al Codemotion que se celebra el fin de semana del 27 y 28 de noviembre en Madrid. Xaviju dará una charla sobre postCSS y CSSnext, en la que también vais a ver como hacer un plugin, si estáis por allí yo no me la perdería. Yo ya he enviado a un par de emisarios :)

Probad malditos!

Si os animáis a usar postCSS os recomiendo que os leáis todos y cada uno de los artículos de la serie que ha publicado Kezz Bracey en tusplus: PostCSS Deep Dive. Simplemente brutal.

También os podéis suscribir al canal de gitter de postCSS donde os resolverán cualquier duda que planteéis y donde os enterareis de las últimas novedades tanto de postCSS como de plugins. También podéis seguir el proyecto en GitHub y twitter.

En Octuweb Marcelo Mazza también escribió una introducción a postCSS.

Y en Heydesigner también van recopilando los artículo que se van escribiendo sobre postCSS.