Dar estilos en desarrollo web y trabajar con ellos se va diversificando día a día con nuevas herramientas o versiones más completas de las que ya tenemos. Te presentamos PostCSS, por si todavía no la conoces, y te contamos por qué deberías usarla.
Afirmar que el interés por PostCSS está creciendo de forma veloz, apenas se cuestiona en los entornos del desarrollo web. Cada día que pasa vemos cómo va creciendo en comunidad y código, ampliando las características de este entorno para trabajar con estilos.
Según la gráfica de Google podemos ver una tendencia al alza, como una remontada, a comienzos del presente año.
Pero, ¿por qué es tan particular para despertar este interés y que los desarrolladores lo estemos implementado en nuestros quehaceres?
Contextualizando la herramienta, PostCSS fue creada y desarrollada por Andrey Sitnik, inventor de Autoprefixer, y construida como un método para usar JavaScript con la finalidad de procesar CSS.
PostCSS es, en sí misma, una simple API que, usada dentro de su enorme colección de plugins, ofrece un sinfín de posibilidades para mejorar nuestro desarrollo a la hora de dar estilos.
Al correr sobre el framework de node.js podemos hacer diferentes scripts en JavaScript para ampliar la funcionalidad de PostCSS que, por sí sola, no hace nada. Y uno de los aspectos claves es su estructura modular.
Al contrario de lo que sucede con Sass o Less, donde podemos tener una librería gigante de mixins que muchas veces no llegaremos a usar, pero están ahí “por si acaso”, PostCSS permite instalar módulos de forma más sencilla, al estilo plug-and-play, y que sólo serán trabajadas por nuestro procesador de tareas (Gulp, Grunt, Broccoli) en el caso de que lo vayamos a usar.
Existen unas excelentes guías en Smashing Magazine para añadirlo a nuestra lista de tareas y colocar los plugins según los vayamos necesitando. La automatización de las tareas ya se irá encargando de compilar, concatenar, minificar, etc. según nuestras configuraciones.
El hecho de hacer el preprocesado sobre JavaScript y no sobre C++, como otros preprocesadores populares, es una de las características que hace que el compilado de PostCSS sea mucho más rápido.
En palabras del propio Andrey Sitnik, podemos apreciar y ver cómo ha mejorado en velocidad con respecto a los preprocesadores más comunes. Pero PostCSS no es un preprocesador únicamente, en ese sentido muchos lo describen como una navaja suiza porque permite hacer todas las tareas en relación a tus necesidades.
Al principio nos quedamos un poco descolocados con el molde PostCSS, intentando verle las costuras, buscando ejemplos que le sean similares para tratar de comprenderlos. Pero debemos quedarnos con la idea de que es un entorno meta CSS o, como dicen muchos frontenders, va más allá del CSS.
Si queremos trabajar con preprocesadores lo podremos hacer; si queremos trabajar con postprocesadores, con extensiones de optimización/limpieza, fallbacks para older-browsers.
Por otra parte, disponemos de extensiones que nos permiten trabajar con futura sintaxis que todavía no se han convertido en un estándar. De este modo no se tiene que consultar el Can I Use ni esperar la compatibilidad entre navegadores. Por descontado, si deseamos trabajar con la sintaxis de Sass, Less, Stylus… lo podremos hacer instalando sus correspondientes módulos.
Lo único que será necesario es llamar a los plugins donde podemos encontrar todas estas funcionalidades o crear nuestro propio plugin si todavía no existe. Para ello contamos con una buena colección de plugins para PostCSS.
Poco a poco iremos encontrando más común el uso de PostCSS en los desarrollos web y de aplicaciones. Estad atentos al blog, porque en próximos posts iremos destacando lo más importante y cómo manejarse dentro de PostCSS con plugins de creación propia y externos.
