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.
¿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
No comments yet.