PostCSS en profundidad: Lo que necesitas saber

Si hay una cosa que realmente necesitas saber sobre PostCSS, es que deberias aprender qué es y cómo usarlo tan pronto como sea posible.

En esta serie, vamos a zambullirnos dentro de PostCSS y te llevaré a través de las principales formas de usarlo. Si no estás listo para explotar tu mente con lo que PostCSS puede hacer, prepárate para un nuevo mundo CSS.

Dentro de PostCSS

PostCSS ha crecido en popularidad a una velocidad vertiginosa. Más y más personas están comenzando a entender qué ofrece, disfrutando el "momento de iluminación" cuando descubren como usarlo en sus propios proyectos.

En 2014 hubo poco menos que 1.4 millones de descargas en total. Pero de enero a junio de 2015, ya se habían producido más de 3.8 millones de descargas.

Autoprefixer, un plugin de PostCSS muy popular, es usado por Google, Shopify, Twitter, Bootstrap and Codepen. WordPress también usa Autoprefixer, así como el plugin RTLCSS. Y Alibaba usa varios plugins de PostCSS, así mismo desarrolla y contribuye con otros plugins.

Más allá de esto, mark Otto ha hablado acerca de que la versión 5 de Bootstrap se escribirá en PostCSS:

Oh, por cierto, Bootstrap 4 será escrito en SCSS. Y si te importa, v5 probablemente será en PostCSS porque, demonios, se ve muy bien.

— Mark Otto (@mdo) April 23, 2015

PostCSS ha sido integrado dentro de CodePen.io y puede ser usado en linea seleccionándolo desde las opciones de CSS.

PostCSS está creciendo, está creciendo muy rápido. Y por una buena razón.

PostCSS en un vistazo

Entonces, ¿qué es PostCSS? La mejor definición viene de la propia página en GitHub del proyecto:

"PostCSS es una herramienta para transformar CSS con plugins de JavaScript". Estos plugins pueden soportar variables y mixins, transpilar la futura sintaxis de CSS, imágenes en línea y más.

En resumen, PostCSS toma CSS y lo convierte en un formulario de datos que JavaScript puede manipular. Los plugins para CSS basados en JavaScript entonces pueden realizar manipulaciones en el código. PostCSS mismo no cambia tu CSS, solo deja listo el camino para que los plugins realicen las transformaciones para las que han sido desarrolados.

Esencialmente, no hay limitaciones en el tipo de manipulación que los plugins de PostCSS pueden aplicar al CSS. Si puedes pensarlo, probablemente puedes escribir un plugin de PostCSS para hacer que suceda.

Los plugins de PostCSS pueden comportarse como preprocesadores, pueden optimizar y añadir prefijos al código y pueden añadir la futura sintaxis, pueden supervisar el código, procesar variables y lógica, proporcionar sistemas de columnas, atajos de código... la lista es larga y variable.

¿Que no es PostCSS?

El hecho de que puedas hacer lo que quieras con los plugins de PostCSS, combinadas con el hecho de que PostCSS es relativamente nuevo, ha llevado a algunos conceptos erróneos acerca de qué es la herramienta.

Muchas personas (yo también, al inicio) teniamos una incompleta impresión de lo que es PostCSS, y nos hemos perdido lo que PostCSS tiene para ofrecer o hemos llegado tarde a la mesa.

Así que antes de continuar, vamos a aclarar algunas de las cosas que PostCSS no es.

PostCSS no es un preprocesador

Muchos desarrolladores dicen que están abandonado los preprocesadores en favor de PostCSS. Mientras tanto, otros se mantienen con su preprocesador actual porque no les gusta PostCSS.  Sin embargo, PostCSS no es un preprocesador.

Si, puedes usar el preprocesador que desees, pero también puedes usar PostCSS sin ninguna funcionalidad similar a la de un preprocesador. Tú puedes, incluso, seguir usando tu preprocesador favorito en conjunto con PostCSS.

PostCSS no es un post-procesador

PostCSS tiene la palabra post en el nombre, pero tampoco es es un "post procesador". Post procesar es tipicamente tomar una hoja de estilo finalizada y validarla, comprimirla y procesarla, haciendo cosas como añadir prefijos. Sin embargo, PostCSS no opera solamente de esta manera Como mencioné antes, puedes usarlo también como si fuera un preprocesador.

Tal vez es mejor pensar en PostCSS como un "procesador". Como Andrey Sitnik, creador de PostCSS dijo en Twitter.

Es momento de admitir mis errores. "Post procesador" fue un mal término. El equipo de PostCSS ha dejado de usarlo. https://t.co/vs2AiXGoJy

— PostCSS (@PostCSS) July 28, 2015

Y como prolífico contribuidor y desarrollador de plugins, Maxime Thirouin describió en Twitter en que lugar de que el término Post (en PostCSS) signifique "post procesador", puede ser mejor entenderlo como "Más allá de CSS".

@HugoGiraudel nadie entre los colaboradores de PostCSS está utilizando esta expresión ya. Ahora es Post CSS como "Css y más allá".

— Maxime Thirouin (@MoOx) July 21, 2015

PostCSS no es la sintaxis del futuro

Hay muchos plugins excelentes y muy conocidos que permiten escribir con la futura sintaxis de CSS que aún no está completamente soportada. Sin embargo, PostCSS no es inherentemente acera de soportar la futura sintaxis.

Algunos desarrolladores han expresado una renuencia a usar PostCSS, diciendo que no se sienten seguros usando la próxima sintaxis. Sin embargo, escribir la próxima sintaxis de CSS es solamente una de las formas de utilizar PostCSS.

Si lo decides, puedes usar PostCSS para revolucionar tu completo proceso de desarrollo sin una sola linea de la próxima sintaxis.

PostCSS no es un herramienta de Limpieza / Optimización

El éxito del plugin Autoprefixer ha generado la percepción común de que PostCSS es algo que corre sobre el CSS completo para limparlo y optimizarlo para mejorar la velocidad y asegurar la compatibilidad entre navegadores. Esta es la percepción que yo tuve, hasta que me enteré de la gran cantidad de otras cosas que se pueden hacer con PostCSS.

Si, hay muchos plugins fantásticos que ofrecen procesos de optimización y limpieza, pero representan solo una fracción de lo que se puede hacer.

PostCSS no es Cualquier otra cosa

Lo más atractivo de PostCSS es que no se limita a un tipo de funcionalidad; representa un sistema totalmente personalizable y configurable de funcionalidad que es potencialmente ilimitado.

Comparalos con los plugins de WordPress Los plugins de Ecommerce son muy populares, pero nadie considera a WordPress como un motor de ecommerce, y el merito de WP no se evalúa en función a sus plugins de ecommerce.

El el caso de PostCSS, me gusta pensar que es como el pan que usas para hacer un sandwich. Por si mismo no parece gran cosa, pero es exactamente lo que debe ser. Ese aparente "vacío" es el por qué de su potencial. Es la capacidad para usarlo con una infinita variedad de rellenos lo que lo vuelve sorprendente.

¿Has probado un sándwich de mantequilla de maní y no te ha gustado? No hay ninguna razón para prescindir del pan en cualquier tiempo de sandwich por siempre. En cambio, podrías probar un próximo relleno y descubrir algo que se convertirá en una nueva parte de su vida diaria.

¿Qué hace especial a PostCSS?

PostCSS es un enfoque completamente diferente a CSS. Un contratista frontend de Londres lo describió como "la navaja suiza de CSS" y es una descripción enteramente aceptable.

Echemos un vistazo a algunas de las cosas que hacen tan especial PostCSS.

Su ecosistema de plugins ofrece diversas funcionalidades

Tan sorprendente como es PostCSS mismo, es la larga lista de plugins que lo hacen brillar. Cuando lees la lista de plugins disponibles en la página de GitHub de PostCSS encontrarás una variedad de funcionalidades que nunca han sido contenidos en un espacio antes.

Hay plugins para la futura sintaxis, que permite usar cosas como, gradientes cónicas, propiedades personalizadas, selectores personalizados, alias personalizados para media queries y mucho mas.

Hay plugins para soportar sintaxis antigua, como añadir fallbacks en hexadecimal para colores rgba(). filtros de opacidad para IE8, convertir selectores de pseudo elementos para IE8, y generar fallbacks en px para unidades rem.

Más de veinte plugins de extensiones del lenguaje están disponibles, incluyendo los que añaden mixins, variables, condicionales, loops for, each, generación de clases BEM y SUIT y mucho más.

Una seleccion de plugins para gestión de color está disponible, permitiendo la conversión de un formato de color a otro, modificar los niveles alfa, combinar colores, generar esquemas de color fácilmente, por nombrar algunos.

Hay sistemas de grids, herramientas de optimización, plugins que añaden atajos, linters y otros plugins de análisis y reporte.

No es posible mencionar completamente la creciente diversidad de plugins en unos pocos párrafos, así que puedes revisar la lista por ti mismo.

Es modular, usa solo lo que necesitas

El otro lado de la increíble lista de plugins disponibles para PostCSS, es que puedes utilizar muchos o pocos, según elijas.

¿Solo quieres usar PostCSS para asegurarte de que tu CSS es más eficiente y es cross browser? Carga algunos plugins de optimización y listo.

¿Quieres usar PostCSS solo como un preprocesador? Usa algun plugin de extensión del lenguaje y ya lo tienes.

La filosofía inherente de PostCSS es una modularidad fina, por lo que no existen plugins descomunales que manejen múltiples funciones. En su lugar, un plugin es creado para una función, y desde ahi pueden se ensamblados en paquetes de plugins con una funcionalidad temática.

Por ejemplo, puedes escoger una selección de plugins para extensiones del lenguaje y crear tu propio preprocesador. O, puedes cargar el paquete PreCSS que te da acceso automático a muchos plugins de extensión del lenguaje de una vez.

Cualquiera que sea el uso que quieras darle a PostCSS, tu puedes ejecutar solo los plugins que necesitas para tus propósitos específicos, por lo que no requieres tener funcionalidad que no vas a usar como peso muerto.

Es rápido: Hasta 3 veces más rápido

Hay dos principales razones por las que PostCSS es muy rápido en las comparaciones. Uno es que es un hecho que solo cargas los plugins que necesitas como se ha indicado antes. La otra es que corre en JavaScript.

Puedes correr estas pruebas por ti mismo usando https://github.com/postcss/benchmark

El resultado de una de estas comparativas, probando parsings, reglas anidadas, variables y matemática fue:

1

PostCSS:   36 ms

2

Rework:    77 ms   (2.1 times slower)

3

libsass:   136 ms  (3.8 times slower)

4

Less:      160 ms  (4.4 times slower)

5

Stylus:    167 ms  (4.6 times slower)

6

Stylecow:  208 ms  (5.7 times slower)

7

Ruby Sass: 1084 ms (30.1 times slower)

Puedes crear tu propio plugin para lo que sea que quieras.

Los plugins de PostCSS son escritos en JavaScript y como tal, cualquiera que pueda escribir JavaScript puede crear un plugin para cualquier propósito que desee.  Para darte una idea, no me considero a mí mismo un duro desarrollador JavaScript como algunos creen, pero después de descubrir  PostCSS tuve la oportunidad de crear mi propio plugin en unas pocas horas.

Preprocesadores como Stylus, Sass o Less hacen un gran trabajo pero ellos no pueden hacer todo por uno. Ellos tienen que decidir que características les servirán mejor a sus usuarios en su conjunto. Si hay una funcionalidad que quisieras tener, debes hacer un pedido que puede ser considerado o no según los lineamientos y las necesidades del proyecto.

Incluso, si haces un pedido (feature request) que se considere adecuado, los colaboradores del proyecto son por lo general voluntarios sin pagos que pueden no tener tiempo para desarrollarlo. Así que si no tienes el nivel de habilidad para crear dicha funcionalidad, estás de mala suerte.

Con PostCSS, en cambio, no tienes que pedírselo a nadie. Si quieres una nueva funcionalidad, la haces. Por mi experiencia, el nivel de JavaScript requerido para crear un plugin PostCSS puede ser manejable para muchos desarrolladores front end.

En un próximo tutorial en esta serie vamos a avanzar en la creación de un plugin básico de PostCSS. Incluso, si no te consideras un experto en JavaScript, creo que podrías descubrir que la creación de un plugin PostCSS es bastante alcanzable.

Puedes usarlo con CSS regular

Un gran porción de PostCSS no requiere el uso de una sintaxis personalizada, como sucede tipicamente con los preprocesadores. Por el contrario, puede aplicarse a CSS normal. Esto significa que puedes usar PostCSS con cualquier archivo CSS que ya tengas, por ejemplo, hojas de estilo de un framework, del proyecto de alguien más o un normalize.css por ejemplo.

Esto también significa que no estás bloqueado por proyectos que usen un preprocesador en particular, sea Stylus, Less o Sass, porque siempre puedes aplicar PostCSS para compilar CSS. Por ejemplo, si usas Foundation via Sass, puedes ejecutar plugins de optimización y de la futura sintaxis CSS después de generar tus archivos CSS.

Las librerías de CSS no están atadas a un único preprocesador.

También estamos empezando a ver completas librerias construidas con PostCSS, que en el pasado podrían haberse escrito con Stylus, Sass o Less.

Por ejemplo, Cory Simmons originalmente mantenía dos versiones (Sass y Stylus) de su Lost grid system para que los usuarios de ambos sistemas puedan aprovecharlo. Posteriormente ha migrado su proyecto a PostCSS, lo que significa que cualquier puede usar Lost, incluyendo los usuarios de Sass y Stylus, pero también los de Less, incluso personas que no trabajan con ningún preprocesador.

Despliegue sin problemas con herramientas populares

Estando basado en JavaScript, PostCSS no requiere que tengas Ruby instalado, y está listo para integrarse con muchas herramientas de desarrollo.

• Hay plugins para Grunt, Gulp, webpack, Broccoli, Brunch y ENB.
• CodePen permite usar PostCSS inline.
• Prepros tiene soporte para los plugins Autoprefixer y cssnext.
• El plugin postcss-use permite fácilmente cargar otros plugins con solo la regla @ en el CSS.
• Puedes usar un package.json para installar cualquier plugin PostCSS con npm a través del comando npm install. Esto facilita el intercambio de proyectos PostCSS, a pesar de la enorme cantidad de posibles variaciones en la configuración de los plugins.

Veremos cómo configurar PostCSS para su uso en la próxima sección de esta serie: "Guía de inicio rápido".

Bien, repasemos.

Lo primero que necesitas saber es que PostCSS está avanzando rápido, y por una buena razón, por ahora es tiempo de entender claramente como puede ayudarte en tu proceso de desarrollo.

En esta introducción cubrimos lo que PostCSS no es:

• No es un preprocesador, aunque opcionalmente podría comportarse como uno.
• No es un post-procesador, aunque opcionalmente puede comportarse como uno.
• No es sobre la sintaxis del futuro, aunque puede facilitar el soporte para esa sintaxis.
• No es una herremienta de limpieza y optimización, aunque puede proporcionar esa funcionalidad.
• No es cualquier otra cosa; esto significa que su funcionalidad es potencialmente ilimitada configurándolo como escojas.

También cubrimos que hace a PostCSS especial:

• La diversa funcionalidad disponible a través de su ecosistema de plugins.
• Es modular, su naturaleza es "usa lo que necesites".
• Rápido tiempo de compilación.
• La accesibilidad de crear tus propios plugins
• La opción de usarlo con tu CSS regular.
• La habilidad de crear librerías que no dependan de un preprocesador.
• Su perfecta implementación con muchas herramientas de populares.

Más adelante en "PostCSS en profundidad"

En esta serie vamos a avanzar con PostCSS a través de los tutoriales:

• Guia rápida de inicio - Opciones de configuración instantáneas
  
• Guía rápida - Configuración de Gulp.
• Guía rápida - Configuración de Grunt
• Guía rápida - Explorar plugins

Desde allí tomaremos un vistazo a algunas de las distintas maneras para usar PostCSS en los tutoriales:

• Para compatibilidad con navegadores
• Para minificación y optimización.
• Preprocesar con PreCSS
• Crear tu propio preprocesador
• En conjunto con Stylus / Sass / LESS
• Métodos CSS BEM y SUIT 
• Atajos y métodos abreviados.
• Miscelanea y tips

Finalmente, terminaremos creando nuestro propio plugin básico de PostCSS.

Puedes notar la ausencia de un tutorial sobre el uso de PostCSS para habilitar la próxima sintaxis de CSS, especialmente porque mucha gente ve a los dos como sinónimos.

La razón de esta ausencia temporal es que el principal plugin para la proxima sintaxis de CSS, cssnext, esta cerca a una transformación importante que podría significar un cambio en los pasos requeridos para usarlo. Así que estaremos atentos y traeremos un tutorial fresco apenas el proyecto haya hecho su transición.

¡Empecemos! En el próximo tutorial, iremos directamente a nuestra "Guía de inicio rápido" y te mostraré las formas más rápidas de empezar a usar PostCSS. Nos vemos.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!