PostCss, un avance impresionante en el mundo Css

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.

postcss

¿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?

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.

postcss

¿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

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

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

No comments yet.

Deja un comentario

Leave your opinion here. Please be nice. Your Email address will be kept private.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Translate »