Share
Si hay algo que realmente necesitas saber sobre PostCSS, es que Debes aprender qué es y cómo usarlo. Lo antes posible.
En esta serie, vamos a realizar una inmersión profunda en PostCSS y te mostraremos todas las formas principales en que puedes usarlo. Si aún no te ha impresionado lo que PostCSS puede hacer, prepárate para un nuevo y valiente mundo CSS..
PostCSS ha ido creciendo en popularidad a una velocidad vertiginosa. Cada vez más personas comienzan a comprender lo que ofrece y disfrutan de ese "momento de bombilla" cuando se dan cuenta de cómo pueden usarlo de forma única en sus propios proyectos..
En 2014, hubo un poco menos de 1.4 millones de descargas en total para el año, pero de enero a junio de 2015 ya hubo más de 3.8 millones de descargas..
Autoprefixer, un popular complemento de PostCSS, es utilizado por Google, Shopify, Twitter, Bootstrap y CodePen. WordPress también utiliza Autoprefixer, así como el complemento RTLCSS. Y Alibaba utiliza varios complementos de PostCSS, además de desarrollar los suyos propios y contribuir a otros proyectos de complementos..
Más allá de eso, Mark Otto ha hablado de que la versión 5 de Bootstrap está escrita en PostCSS:
Oh, btw-Bootstrap 4 estará en SCSS. Y si te importa, v5 probablemente estará en PostCSS porque es una mierda que suena bien.
- Mark Otto (@mdo) 23 de abril de 2015
PostCSS se acaba de integrar en CodePen.io y se puede usar en línea seleccionándolo dentro de la configuración de CSS:
PostCSS en CodePenPostCSS está creciendo, está creciendo rápidamente y por una buena razón.
Entonces, ¿qué es PostCSS? La mejor definición proviene de la propia página de GitHub del proyecto:
“PostCSS es una herramienta para transformar CSS con complementos de JS. Estos complementos pueden admitir variables y combinaciones, transcribir la sintaxis CSS futura, imágenes en línea y más.
En pocas palabras, PostCSS toma CSS y lo convierte en una forma de datos que JavaScript puede manipular. Los complementos basados en JavaScript para PostCSS luego realizan dichas manipulaciones de código. PostCSS en sí no cambia su CSS, solo allana el camino para que los complementos realicen las transformaciones para las que han sido diseñados..
Básicamente, no hay limitaciones en el tipo de manipulación que los complementos de PostCSS pueden aplicar a CSS. Si puedes pensar en ello, probablemente puedas escribir un complemento de PostCSS para hacerlo realidad.
Los complementos de PostCSS pueden comportarse como preprocesadores; pueden optimizar y corregir automáticamente el código, pueden agregar sintaxis futura, pueden realizar lineado, pueden procesar variables y lógica, pueden proporcionar sistemas de cuadrícula completos, pueden ofrecer accesos directos de codificación ... la lista es larga y variada.
El hecho de que puede hacer casi cualquier cosa que desee con los complementos de PostCSS, combinado con el hecho de que PostCSS todavía es relativamente nuevo, ha llevado a algunos conceptos erróneos sobre lo que realmente es la herramienta.
Muchas personas, (yo incluido, inicialmente), han tenido una impresión incompleta de lo que realmente es PostCSS y, por lo tanto, se han perdido lo que PostCSS tiene para ofrecer o han llegado tarde a la mesa.
Entonces, antes de continuar, aclaremos algunas de las cosas que PostCSS es no.
Numerosos desarrolladores han dicho que están abandonando los preprocesadores de CSS en favor de PostCSS. Mientras tanto, otros afirman que debido a que prefieren su preprocesador actual, no les gusta PostCSS. Sin embargo, PostCSS es no un preprocesador.
Sí, puede usarlo como preprocesador si lo desea, pero también puede usar PostCSS sin ninguna funcionalidad similar a la de un preprocesador. Incluso puedes seguir usando tu preprocesador favorito en conjunción con PostCSS.
PostCSS tiene la palabra "publicación" en el nombre, pero tampoco es realmente un "postprocesador". Por lo general, se considera que el procesamiento posterior toma una hoja de estilo terminada que comprende la sintaxis CSS válida y la procesa, para hacer cosas como agregar prefijos de proveedores. Sin embargo, PostCSS no está restringido a operar únicamente de esta manera. Como se mencionó anteriormente, también puede comportarse como un preprocesador.
Quizás es mejor pensar en PostCSS como un "procesador". Como dijo Andrey Sitnik, el creador de PostCSS, en Twitter:
Ya es hora de admitir mis errores. El término "postprocesador" era malo. El equipo de PostCSS dejó de usarlo. https://t.co/vs2AiXGoJy
- PostCSS (@PostCSS) 28 de julio de 2015
Y como el prolífico colaborador y desarrollador de complementos de PostCSS, Maxime Thirouin, describió en Twitter, en lugar del "post" en PostCSS que se refiere al procesamiento de "post", es mejor pensar que significa "CSS y más allá".
@HugoGiraudel nadie en los colaboradores de postcss ya está usando esta expresión. Ahora es Postcss como "css y más allá"
- Maxime Thirouin (@MoOx) 21 de julio de 2015
Hay algunos complementos excelentes y muy conocidos de PostCSS que le permiten escribir en la sintaxis futura, es decir, mediante el uso de CSS que estará disponible en el futuro pero que aún no se admite ampliamente. Sin embargo, PostCSS no es inherentemente un soporte de sintaxis futura.
Algunos desarrolladores han expresado su reticencia a usar PostCSS, diciendo que es porque no están seguros de estar cómodos con la escritura de la sintaxis futura. Sin embargo, escribir la sintaxis futura es solo una de las muchas formas en que puede utilizar PostCSS.
Si así lo elige, puede usar PostCSS para revolucionar completamente sus procesos de desarrollo sin una línea de sintaxis futura a la vista.
El éxito del complemento Autoprefixer ha llevado a la percepción común de PostCSS como algo que ejecuta en su CSS completo para limpiarlo y optimizarlo para la velocidad y la compatibilidad entre navegadores. Esta es la percepción que tuve de mí misma, hasta que supe de la enorme variedad de otras cosas que puede lograr con PostCSS.
Sí, hay muchos complementos fantásticos que ofrecen excelentes procesos de limpieza y optimización, pero estos son solo una fracción de lo que se ofrece.
Lo más convincente de PostCSS es que no está restringido a ningún tipo de funcionalidad; representa un conjunto de funcionalidades completamente personalizable y configurable que es potencialmente ilimitado.
Considere los complementos de WordPress como un paralelo. Los complementos de comercio electrónico son muy populares, pero nadie considera a WordPress como un motor de comercio electrónico, y los méritos de WordPress no se evalúan en función de sus complementos de comercio electrónico..
En el caso de PostCSS, me gusta pensar que es como el pan que usas para hacer un sándwich. Por sí solo no parece mucho, pero así es exactamente como se supone que debe ser, y este "vacío" aparente es la razón por la que tiene tanto potencial. Es la capacidad para una variedad infinita de rellenos que le da algo sorprendente.
Un sándwich ayer¿Probaste un sándwich de mantequilla de maní y no te gustó? Esa no es ninguna razón para jurar pan y todo tipo de sándwiches para siempre. En su lugar, continúe con el siguiente llenado y podría descubrir algo que se convierte en una parte nueva e impresionante de su vida diaria..
PostCSS es un enfoque completamente diferente de CSS. Un contratista principal de Londres con el que hablé lo describió como "una navaja suiza para la producción de CSS" y esa es una descripción completamente adecuada..
Echemos un vistazo a algunas de las cosas que hacen que PostCSS sea tan especial..
Tan increíble como es PostCSS en sí mismo, es la larga lista de diversos complementos que realmente lo hacen brillar. Cuando lea la lista de complementos disponibles en la página de GitHub de PostCSS, encontrará una variedad de funciones que nunca se han contenido en un espacio antes.
Hay complementos para futuras sintaxis, que le permiten usar cosas como funciones de color, gradientes cónicos, propiedades personalizadas, selectores personalizados, alias personalizados para consultas de medios y mucho más..
Existen complementos de respaldo para crear una sintaxis heredada, como agregar complementos hexadecimales para rgba () colores, agregando filtros de opacidad para IE8, convirtiendo selectores de elementos psuedo para IE8 y generando px fallbacks para movimiento rápido del ojo unidades.
Hay disponibles más de veinte complementos de extensión de idioma, que incluyen la adición de mixins, variables, condicionales, para y cada uno de los bucles, generación de clases de estilo BEM y SUIT y varios más..
Se encuentra disponible una selección de complementos de administración de color, que permite la conversión de un formato de color a otro, modifica los niveles alfa, combina colores, genera esquemas de color que no son tan ciegos al color, por nombrar algunos.
Existen sistemas de cuadrícula, herramientas de optimización, complementos que agregan atajos y taquigrafía, linters y otros complementos de análisis e informes..
No es posible transmitir completamente la diversidad en constante expansión de la selección del complemento actual en unos pocos párrafos, así que asegúrese de revisar la lista por sí mismo..
La otra cara de la increíble lista de complementos disponibles para PostCSS es que puede usar tantos o tan pocos como desee..
¿Solo desea utilizar PostCSS para hacer que su CSS sea más eficiente y compatible con múltiples navegadores? Cargue unos cuantos complementos de optimización y estará fuera.
¿Quieres usar PostCSS únicamente como preprocesador? Utilice algunos complementos de extensión de idioma en su lugar y ya está todo listo.
La filosofía subyacente de PostCSS es la modularidad de grano fino, por lo que no hay complementos descomunales que manejen múltiples funciones. En su lugar, se crea un complemento por función, y desde allí se pueden ensamblar en paquetes de complementos con funcionalidad de temática común.
Por ejemplo, puede seleccionar una selección de complementos para las extensiones de idioma y crear su propio preprocesador personalizado. O alternativamente, puede simplemente cargar el paquete PreCSS que le dará acceso automático a varios complementos de extensión de idioma a la vez..
De cualquier forma que desee utilizar PostCSS, puede ejecutar solo los complementos que necesita para sus propósitos específicos, lo que significa que no tiene que arrastrar ninguna funcionalidad no utilizada como peso muerto.
Hay dos razones principales por las que PostCSS prueba muy rápido en los puntos de referencia. Uno es el hecho de que solo tiene que cargar los complementos que necesita, como se describe anteriormente. La otra es que se ejecuta en JavaScript..
Puede ejecutar estos puntos de referencia utilizando https://github.com/postcss/benchmark
El resultado de uno de estos puntos de referencia, análisis de pruebas, reglas anidadas, combinaciones, variables y matemáticas fue:
PostCSS: 36 ms Reprocesamiento: 77 ms (2.1 veces más lento) libsass: 136 ms (3.8 veces más lento) Menos: 160 ms (4.4 veces más lento) Lápiz: 167 ms (4.6 veces más lento) Stylecow: 208 ms (5.7 veces más lento) Ruby Sass: 1084 ms (30.1 veces más lento)
Los complementos para PostCSS están escritos en JavaScript, y como tal, cualquier persona que pueda escribir JavaScript puede crear un complemento para cualquier propósito que desee. Para que te hagas una idea, no me considero un desarrollador de JavaScript de núcleo duro, pero después de descubrir PostCSS pude crear mi primer complemento completamente funcional en el espacio de unas pocas horas..
Los proyectos de preprocesador como Stylus, Sass y LESS hacen un trabajo maravilloso, pero no pueden ser todo para todos. Deben decidir qué características servirán mejor a su base de usuarios en general. Si hay una funcionalidad que le gustaría tener, puede realizar una solicitud de función pero puede o no considerarse que se alinea con las necesidades más amplias del proyecto..
Incluso si realiza una solicitud de función que se considera adecuada, los mantenedores de los proyectos suelen ser voluntarios no remunerados que pueden no tener el tiempo para desarrollarla. Entonces, si no tienes el nivel de habilidad para crearlo, dice tú mismo, no estás de suerte..
Con PostCSS por otro lado, no tiene que preguntar a nadie. Si quieres una nueva característica, puedes seguir adelante y hacerla. Desde mi experiencia, el nivel de experiencia de JavaScript requerido para crear un complemento PostCSS sería manejable para muchos desarrolladores front-end.
En un tutorial posterior de esta serie, veremos la creación de un complemento básico de PostCSS. Incluso si no te consideras un experto en JavaScript, creo que encontrarás que la creación del complemento PostCSS es bastante factible.
Una gran parte de los complementos de PostCSS no requiere el uso de sintaxis personalizada, como es típico en los preprocesadores. Más bien, se pueden aplicar a CSS regular. Esto significa que puede usar PostCSS con cualquier archivo CSS del que disponga, como hojas de estilo completadas desde un marco frontal, desde el proyecto de otra persona o un archivo Normalize.css, por ejemplo..
También significa que no está bloqueado para los proyectos que usan un preprocesador en particular, ya sea Stylus, Sass o LESS, porque siempre puede aplicar PostCSS al CSS compilado. Por ejemplo, si usa Foundation a través de Sass, puede ejecutar la optimización y futuros complementos de sintaxis después de generar los archivos CSS de su proyecto.
También estamos empezando a ver bibliotecas enteras construidas con PostCSS, donde en el pasado podrían haberse escrito en Stylus, Sass o LESS.
Por ejemplo, Cory Simmons originalmente mantenía las versiones Stylus y Sass de su sistema de cuadrícula Perdido para que los usuarios de ambos preprocesadores pudieran acceder. Posteriormente, trasladó el proyecto a PostCSS, lo que significa que ahora todos pueden usar Lost, incluidos los usuarios de Stylus y Sass, pero también los usuarios de LESS y las personas que no trabajan con un preprocesador..
Al estar basado en JavaScript, PostCSS no requiere que tengas instalado Ruby, y tiene integraciones ya hechas para varias herramientas de desarrollo..
Accentsconagua
@ reglas en tu CSSnpm instalar. Esto facilita el intercambio fácil de proyectos PostCSS, a pesar de la gran cantidad de posibles variaciones en la configuración del complemento.Veremos cómo puede configurar para usar PostCSS en la próxima sección "Guía de inicio rápido" de esta serie..
Lo primero que debe saber es que el PostCSS se está acelerando rápidamente, y por una buena razón, ahora es el momento de desarrollar una comprensión clara de cómo puede ayudar a sus procesos de desarrollo..
En esta serie, comenzaremos explicándote cómo comenzar con PostCSS a través de los tutoriales:
Desde allí veremos de cerca varias de las diversas maneras en que puede usar PostCSS en los tutoriales:
Finalmente, terminaremos llevándote a través creando tu propio complemento básico de PostCSS.
Puede notar una ausencia notoria de un tutorial sobre el uso de PostCSS para habilitar el futuro CSS, especialmente dado que muchas personas ven los dos como sinónimos..
El motivo de esta ausencia temporal es que el complemento principal para el futuro CSS, cssnext, parece que está a punto de sufrir una transformación importante que podría cambiar significativamente los pasos necesarios para usarlo. Como tal, lo vigilaremos y le ofreceremos un nuevo tutorial una vez que el proyecto haya realizado su transición..
¡Vamos a empezar! En el siguiente tutorial, iremos directamente a nuestra "Guía de inicio rápido" y le mostraremos las formas más rápidas de comenzar a usar PostCSS. Te veré allá!
