Cosas que desconocías sobre PostCSS

postcss

postcss

PostCSS para los que no lo conocen, se encarga de analizar el código CSS y convertirlo en un documento modificable con plugins en JavaScript, desde optimización de código, retoques de color, añadir propiedades y selectores personalizados, metodología de clases BEM y SUIT, análisis y atajos, en pocas palabras es una herramienta para simplificar el proceso a los desarrolladores.

¿Que realmente resolverá PostCSS?

Los preprocesadores que conocemos no son extensibles, estos disponen de una serie de características que no se pueden modificar o aumentar.

La mayoría de ocasiones excesivamente alejados de los estándares de W3C.

Con PostCSS, los desarrolladores disponen de plugins que sí se ajustan a los estándares de diseño de W3C. Lo que los proyectos que hagas no tendrán problemas con W3C.

PostCSS tiene la posibilidad de que puedas diseñar  tu propio plugin, estos se  pueden instalar por separado y decidir en qué orden se ejecutan y se pueden configurar.

¿Como podemos empezar a usar PostCSS?

Existen diferentes maneras. Una de ellas es a través de un configurador de tareas automáticas para JavaScript. Este tipo de herramientas son muy habituales en desarrolladores JS.

Algunas de las más interesantes son Grunt, Gulp o Broccoli. En todos los casos, existe una dependencia de Node.js, por lo que es necesario primero tener instalado el intérprete de JavaScript.

Con Node.js instalado en el equipo, se debería instalar Gulp.

npm install -g gulp

En el caso de tener sistema operativo Linux o Mac OS X, el comando sería este:

sudo npm install -g gulp

Si ya tienes el proyecto totalmente configurado  con Node.js y Gulp en el equipo, lo único que deberías de hacer para instalar PostCSS es usar la siguiente línea de comandos:

npm install –save-dev gulp-postcss.

¿Es necesario tener instalado Gulp para configurar PostCSS en el equipo? No, es una forma de instalarlo si usamos habitualmente este gestor de tareas para proyectos.

También podemos utilizar el siguiente comando de instalación en npm para configurar PostCSS sin la necesidad de tener Gulp, Grunt o también Broccoli:

npm install -g postcss-cli.

El mejor método para comprobar que todo está correcto y PostCSS instalado es ejecutar este comando:

postcss –help.

PostCSS dispone de toda la documentación de configuración en el repositorio de GitHub.

Los Plugins en PostCSS

Los  plugins realizan funciones y tienen características muy específicas. Por eso en muchas ocasiones los desarrolladores no usan plugins por separado, sino que prefieren utilizar paquetes de plugins que agrupan funcionalidades. El más conocido es cssnext, ya que este tiene muchas características muy importantes como las siguientes:

Selectores de color personalizados.

Media queries adaptables.

Propiedades y variables personalizadas.

Pseudo-clases CSS.

Filtro de propiedades.

Función de color.

Adición de fallbacks en colores RGBA.

Capacidad para añadir condicionales.

Sistema de grids.

Herramientas de optimización.

Atajos.