Post-procesadores CSS para principiantes Consejos y recursos
Pre-procesamiento de CSS es un concepto que la mayoría de los desarrolladores web ya han aprendido o leído. Hemos cubierto el preprocesamiento de CSS con gran detalle para ayudar a los desarrolladores a ponerse al día con esta tecnología predominante. Pero que pasa post-procesadores?
Estas herramientas relativamente nuevas son similares en el sentido de que afectar el flujo de trabajo de desarrollo web, sin embargo operan en el otro lado del desarrollo de CSS (“enviar” desarrollo).
En este post, me gustaría introducir el fundamentos del post-procesamiento, cómo funciona, por qué lo usaría y compartiría algunas bibliotecas / herramientas que puede usar para mejorar su juego CSS con el posprocesamiento.
Post vs. preprocesamiento
los revolución de preprocesamiento sucedió cuando Sass / LESS golpea la escena. Estas herramientas permiten a los desarrolladores usar variables, bucles, funciones y combinaciones dentro de CSS. Esto casi hace que el desarrollo básico de CSS. similar a un lenguaje de programación con funcionalidad extendida.
Postprocesamiento sucede después de que ya haya producido el CSS simple, y quiera extenderlo más A través de la automatización. Esto puede incluir extender selectores de clase, o prefijos auto-agregados para ciertas propiedades CSS.
En general, el preprocesamiento tiene su lenguajes propios de hojas de estilo, como Sass y LESS, que convertir en CSS puro. El post-procesamiento toma ese CSS básico, y aplica automatización / repetición.
Aquí hay una cita de una publicación que también es la fuente de la imagen de arriba. Creo que el autor Stefan Baumgartner resume la diferencia brillantemente.
En cierto modo, ambos parecen herramientas de automatización, simplemente funcionan de diferentes maneras. Por ejemplo, un dolor común resuelto por el posprocesamiento es Añadir prefijos automáticamente para las nuevas propiedades CSS3.
Pero esto también se puede hacer en Sass con extensiones.. Entonces, ¿hay realmente una diferencia? Aquí hay otra gran cita del mismo post:
Si bien esto puede ser cierto en un sentido teórico, la comunidad de desarrollo web todavía crea una división entre estas herramientas. Por este motivo, recomendaría encarecidamente a los desarrolladores frontend que al menos lean sobre los postprocesadores y que sepan qué pueden hacer..
Ajuste el post-procesamiento en su flujo de trabajo
Casi todas las referencias PostCSS como el recurso definitivo para su posterior procesamiento. Sin embargo, el equipo de PostCSS ha admitido abiertamente en Twitter a cambiando su titulo porque la palabrería ya no tiene sentido.
PostCSS ya no es solo una herramienta pre-CSS o post-CSS. Puede en realidad trabajar en ambas areas! Esto explica con más detalle la cita de una declaración anterior que indica que todas las herramientas de CSS se reducen a una sola cosa. - tratamiento.
PostCSS utiliza complementos de JavaScript para automatiza tu flujo de trabajo CSS, e incluso puede escribir su propio complemento JS para ampliar la biblioteca PostCSS. Si desea comenzar con PostCSS, consulte este tutorial de introducción en Smashing Magazine. Si ya usa y entiende Sass, entonces seleccionará Publicar CSS rápidamente..
Para crear su propio flujo de trabajo de procesamiento pre / post CSS, comience por haciendo una lista de sus puntos de dolor, como:
- auto-prefijo de gradientes CSS
- auto-organización para las reglas CSS
- anexando polyfills para ciertas propiedades
- Generando dimensiones de imagen para imágenes de fondo.
Tenga en cuenta que todas estas cosas se pueden hacer tanto en pre y post-procesamiento. Es importante darse cuenta de que el procesamiento previo / posterior de CSS se está fusionando rápidamente para convertirse en uno en la misma cosa.
En lugar de desglosar sus objetivos en diferentes etapas de procesamiento, es mejor enumerarlos como objetivos, entonces ve a un buscar las herramientas adecuadas.
Las mejores herramientas de post-procesamiento.
He intentado evitar mencionar las extensiones en esta sección, ya que Sass y PostCSS tienen muchas cosas para elegir. Honestamente tu pudiste sobrevivir solo con esas bibliotecas, Pero también quiero ofrecer algo Alternativas para soluciones más específicas..
Por favor
Si ya trabaja con Node.js, entonces Pleeease parece ser una opción obvia. Tiene muchos características típicas de procesamiento de CSS, como la importación de archivos, variables / funciones, minimización automática y soporte de respaldo para elementos más nuevos como SVGs.
El sitio web también tiene una patio de recreo interactivo para cualquier persona que quiera probar la biblioteca en línea sin descargar una copia localmente.
Bendecir
Recuerdo cuando Internet Explorer 6 seguía siendo una molestia, y es bueno saber que el desarrollo de IE ha mejorado, pero no mucho. Aunque me gustaría decirte que el uso de IE básicamente se ha ido, esto simplemente no parece ser cierto.
Afortunadamente, Bless CSS es una solución que detecta problemas potenciales relacionados con IE en su CSS, y crea soluciones con post-procesamiento. Se ejecuta en Node.js, por lo que encaja bien en el flujo de trabajo típico de NPM / Gulp.
CSSSiguiente
Aquí hay una biblioteca realmente genial que te permite construir CSS con funcionalidad más avanzada que actualmente no es compatible. La biblioteca CSSNext incluye soporte para funciones CSS4 impares, como gris(), que actualmente solo están presentes en los borradores del W3C.
No creo que todos los desarrolladores necesiten esta biblioteca. Es muy específico y no solucionará los problemas cotidianos, sin embargo, puede darle una sabor de las próximas especificaciones CSS4 Mientras se convierte la sintaxis a CSS3 moderno.
Stylecow
Si soporte del navegador Es un problema para ti, entonces Stylecow es una necesidad. Esta poderosa biblioteca te permite desarrollar CSS solo para tu navegador favorito. Luego, puede ejecutar la herramienta de línea de comandos a través de Nodo, y su CSS será actualizado para todos los navegadores que quieres soportar.
Puedes descargar Stylecow desde GitHub, y viene con una documentación increíblemente detallada..
-sin prefijo
Por último quiero compartir el -sin prefijo biblioteca que también es una herramienta amada para el desarrollo de CSS, ya que le permite usar propiedades CSS sin prefijo. Todos quieren usar propiedades CSS modernas, como animaciones y degradados, pero nadie quiere copiar / pegar código detallado manualmente..
Con este complemento, ni siquiera tiene que ejecutar su CSS a través de un postprocesador en su computadora. También puede funcionar como un navegador que se ejecuta en la computadora del usuario para actualizar automáticamente los archivos CSS.
Autoprefixer, que es parte de la biblioteca PostCSS, es probablemente incluso una mejor opción para post-procesamiento local. Por eso dije antes que si usas LESS o Sass junto con PostCSS, tendrás todo lo que necesitas para un impresionante flujo de trabajo de desarrollo de CSS..
Terminando
El posprocesamiento es más una frase clave que una tecnología real, aunque tiene su lugar en el flujo de trabajo CSS, como todo el proceso de escritura de CSS moderno se ha mejorado dramáticamente con estas herramientas. Solo puedo recomendar que los desarrolladores profundicen más para encontrar lo que mejor les funcione..
Si está buscando aún más información sobre el procesamiento posterior, eche un vistazo a estos artículos relacionados:
- Lo que nos salvará del lado oscuro de los procesadores CSS?
- Una mirada a la escritura del futuro CSS con PostCSS y csssiguiente
- Preprocesamiento de CSS (SASS o LESS) vs Postprocesamiento de CSS
