Pre y Post Procesadores de CSS, lo que hay en medio.
La manera en la que escribimos los estilos de nuestros sitios definitivamente no es la misma que cuando comenzamos a aprender CSS. Cada día buscamos agilizar, optimizar y disminuir tanto el trabajo como las líneas en nuestras hojas de estilos. De unos años para atrás a la fecha, la popularidad de los pre procesadores ha ido in crescendo, hemos partido de escribir CSS puro a utilizar herramientas como Stylus, Less y Sass. Hoy en día un nuevo término es el que surge: el de los post procesadores, y nos hace cuestionarnos ¿qué son?, ¿cómo funcionan?, ¿en qué parte dejan a los ya conocidos pre procesadores?, ¿son su reemplazo?, ¿debo aprender uno en lugar de otro o ambos pueden convivir en un mismo ambiente?
“First it’s something different, then it’s CSS”
Podríamos definir a los pre procesadores como herramientas que toman un lenguaje y lo transforman en CSS. Entre las opciones más populares que podemos encontrar tenemos a Stylus, Less y Sass; los cuales reciben como input su propio lenguaje (.styl, .less, .scss, ) para después compilarlo en CSS. Los pre procesadores fueron concebidos como herramientas de authoring o lo que es igual, herramientas que buscan facilitar el trabajo del desarrollador al escribir los estilos de un sitio. La ventaja que cualquiera de estas herramientas ofrecen es que extienden la funcionalidad de CSS, es decir, permiten al desarrollador realizar cosas que no se podrían hacer con CSS puro; esto lo realizan mediante el uso de variables, operaciones, importaciones, mixins, y más capacidades que dotan de esteroides a la hoja de estilo.
“Post-processing was about optimization and automation”
Por otra parte, el término post procesador es relativamente nuevo y se ha vuelto más popular a lo largo de este año. Podríamos definirlo como las herramientas que procesan el CSS —escrito por un desarrollador o el output de un pre procesador— y lo transforman en una nueva hoja de CSS que le permiten optimizar y automatizar los estilos para los navegadores actuales. Ejemplos de esta optimización y automatización son la minificación y concatenación del código, así como el agregado de vendor prefixes y fallbacks. Existen en el mercado muchas opciones de post procesadores entre los que encontramos a Pleeease, Rework y PostCSS, siendo este último el más popular actualmente.
La realidad es que muchas de las tareas que algunos de los pre procesadores realizan pueden ser reemplazadas por plugins de post procesadores como PostCSS. A su vez, algunas de las funciones que los post procesadores realizan no son exclusivas de ellos, sino que también las podemos realizar con herramientas como Sass o Less. La recomendación es usar post procesadores para manejar nuestros polyfills y vendor prefixes, pero usar los pre procesadores para escribir nuestros estilos de manera más ágil haciendo uso de variables, anidamiento, mixins, partials e imports.
Cada desarrollador crea su propio stack y ambiente de desarrollo, algunos podrán preferir continuar usando solamente Sass o Less y crear sus propios mixins para resolver sus problemas de polyfills y algunos otros preferirán usar nuevas herramientas como PostCSS y Pleeease, usando los plugins más populares como cssnext o autoprefixer. Mi opinión es que el uso del uno o del otro es cuestión de gustos y de qué te hace sentir más cómodo como desarrollador. Al final de cuentas, todas estas herramientas fueron creadas para facilitarnos la vida al escribir los estilos de nuestros sitios y no están peleadas entre sí ni son mutuamente excluyentes.