Mastering PostCSS for Web Design

Guía avanzada de Alex Libby, su undécimo libro con Packt, sobre PostCSS. Este procesador de CSS basado en plugins se presentaba en 2016 como alternativa más rápida y modular a preprocesadores como Sass, Less o Stylus. Está dirigida a desarrolladores y diseñadores frontend que ya dominan HTML5 y CSS3, y resulta especialmente útil para quienes vienen de Sass o Less y quieren llevar a PostCSS lo que ya hacen allí. Los ejercicios están planteados en Windows y se ejecutan con Node.js.

El libro arranca con la preparación del entorno y un primer procesador que añade prefijos de proveedor de forma automática (Autoprefixer) y genera versiones minificadas de las hojas de estilo. A partir de ahí, recorre con plugins de PostCSS las funciones típicas de un preprocesador: variables y mixins con condicionales, anidamiento de reglas (incluido el estilo BEM), optimización de media queries, gestión de colores, imágenes, fuentes, SVG y soporte para pantallas retina, y la creación de sistemas de rejilla. La segunda mitad es más técnica: cómo extender PostCSS mediante su API, uso de atajos, fallbacks y packs de plugins, cómo escribir plugins propios, crear un preprocesador a medida, definir sintaxis personalizada y combinar PostCSS con otros preprocesadores. Cierra con capítulos sobre linting, optimización, resolución de problemas y buenas prácticas, y otro sobre cómo prepararse para la sintaxis CSS que estaba por llegar.

La práctica consiste en demos breves por capítulo que culminan en un plugin y un preprocesador propios, más que en un sitio completo. Su mayor aporte es explicar la arquitectura modular de PostCSS para que el lector arme su propia cadena de procesado en lugar de depender de una herramienta monolítica. Conviene saber que el ecosistema de plugins ha cambiado mucho desde 2016: varios plugins se han renombrado o abandonado, y propuestas como cssnext han dado paso a postcss-preset-env. Además, el CSS nativo ya incluye variables y anidamiento. Por eso vale más por los conceptos que como referencia literal de código, y hace falta soltura con la línea de comandos y npm.