Es posible que lleguéis a esta entrada con sentimientos encontrados. Al menos, a mi me pasó cuando conoci «PostCss»

• Desconcierto: Hace poco que hemos aprendido a usar los preprocesadores css y ahora vienen hablando ya de PostCss
• Curiosidad: El concepto de preprocesador css me resolvió muchos problemas. A ver qué es eso de PostCss ..

Qué es el PostCss?

A todo el mundo le lleva a confusión el nombre PostCss y la verdad es que no es muy intuitivo.

¿Es un preprocesador?¿Es un postprocesador? ¿Viene a sustituir a los preprocesadores? Y si no … ¿Convivirán juntos el PostCss con los preprocesadores?

Respondo a las  dudas:

• PostCss no es un preProcesador y por lo tanto no viene a sustituirlos ni se debe comparar las caracteristicas de unos y otros
• PostCss no es un postProcesador. Tiene tareas propias de un postProcesador como son el empaquetado del css, autoprefixer, validacion de sintaxis … pero no se limita solo  a estas tareas. Es mucho más que un postProcesador
• Preprocesadores y PostCss pueden convivir juntos. Puedes tener funcionando tu preprocesador Sass y a la vez tener PostCss mejorando el css generado por Sass y añadiendo más funcionalidades.

Pero entonces, ¿qué es PostCss?

En la página del proyecto lo definen como

«herramienta para trabajar con Css usando plugins Javascript»

Podremos hacer lo que nos de la gana con el css usando los plugins adecuados.

¿Dónde buscar plugins?

• Pagina principal de PostCss: Tienen una lista amplia de plugins que se actualizan con frecuencia.
• PostCss.parts: Mucho más cómodo que el anterior para buscar un plugin.

Vamos a probar el poder de PostCss usando el pack de plugins Cssnano

• Cssnano: Nos preparará las hojas de estilo para desplegarlas en producción con un montón de optimizaciones.

¿Por donde empezamos con PostCss?

PostCss se integra en proyectos Node y se configura de forma fácil  en Gulp, Grunt o el TaskRunner que uséis.

Podeis consultar conceptos sobre Node en post anteriores

Creando proyectos con Node  –> Link 

Empezaremos instalando el paquete cssnano (un pack de plugins de postcss) con npm y tenerlo disponible en nuestro proyecto.
Trabajaremos con grunt como TaskRunner. Ejecutando la siguiente sentencia, se nos descargará el módulo necesario para trabajar con cssnano

npm install --save-dev grunt-cssnano

Cargamos el módulo indicandoselo a grunt.

module.exports = function(grunt) {
  grunt.initConfig({
    //Configuracion de plugins
  });
 
  grunt.loadNpmTasks('grunt-cssnano');
 
};

Ejemplo de uso del plugin Cssnano

Cssnano es un pack de plugins para optimizar nuestras hojas de estilo en producción. Podemos realizar las siguientes tareas de optimizacion

• Autoprefixer: Nos añade al css  los vendor prefixers que detecte necesarios
• Merge-rules:  Nos aplica reglas a nuestro css
• Calc:  Nos reduce referencias siempre que sea posible
• MinifyFontValues: Intenta minimizar los estilos de fuentes utilizadas siempre que sea posible
• colormin: Intenta minimizar las apariciones de colores en el css
• minifyGradients: Minimiza apariciones relativas al gradiente
• convertValues: Conversión de valores para reducir el tamaño del css. Por ejemplo 500ms lo transformara en .5s
• minifySelectors: Minimiza el numero de selectores.
• normalizeCharset: Añade o remueve los charset necesarios al documento
• discardComments: Descarta los comentarios del css
• normaalizeUrl: Normaliza las URL
• discardDuplicates: Descarta reglas duplicadas
• orderedValues: Ordena los valores de forma consistente
• discardEmpty: Descarta reglas vacias
• discardUnused: Descarta estilos que no se estén usando
• reduceTransforms: Reduce la sintaxis de las transformaciones
• filterPlugins: Elimina plugins duplicados
• svgo: Optimiza tratamiento de svg
• uniqueSelectors: Te asegura que los selectores son unicos y no se repiten

Por ejemplo
Estos estilos aplicados de forma separada sobre el tag «a»

a {color: blue}
a {font-weight: bold}
p {color: blue;font-weight: bold}

Aplicando el plugin merge-rules nos los transformaria en lo siguiente

a,p {
    color: blue;
    font-weight: bold
}

Aplicando el plugin Autoprefixer, tendremos por fin el css limpio sin los molestos vendor prefixer. Esto serán nuestras reglas

:fullscreen a {
    display: flex
}

Y esto será lo que realmente generará

:-webkit-full-screen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

Si quereis probarlo vosotros mismos, os dejo un proyecto en github

Además os incluyo algunos links interesantes sobre el tema

• Postcss:
• Octuweb
• PostCssDivedive

Post By Rocio Muñoz (37 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect