10 asombrosos complementos de PostCSS para hacerte un asistente de CSS

PostCSS es una herramienta increíblemente versátil que hace posible transformar estilos CSS con complementos de JavaScript. Su flexibilidad reside en la forma en que está construido..

La parte central de PostCSS es un módulo Node.js que puede instalar con npm, y tiene un ecosistema de más de 200 complementos que puede elegir usar en su proyecto.

PostCSS no es un preprocesador ni un postprocesador, ya que los diferentes complementos de PostCSS pueden caer en cualquiera de estas categorías, o en ambas; Depende totalmente de ti lo que hagas de ella. Con PostCSS, tu No es necesario aprender una sintaxis diferente Como en el caso de Sass o LESS; inmediatamente puede comenzar a usarlo.

PostCSS toma su archivo CSS existente y lo convierte en datos legibles por JavaScript, luego los complementos de JavaScript realizan las modificaciones y PostCSS devuelve la versión alterada del archivo original. Suena bien, ¿no es así??

En esta publicación veremos 10 complementos de PostCSS para le dará una idea de algunas de las grandes cosas que puede lograr con esta increíble herramienta.

1. Autoprefixer

Autoprefixer Probablemente sea el complemento de PostCss más conocido, ya que lo utilizan compañías de tecnología notables como Google, Twitter y Shopify. Eso agrega prefijos de proveedores a las reglas CSS donde sea necesario.

Autoprefixer utiliza datos de Can I Use. De esta manera no se fecha, y siempre puede aplicar las reglas más recientes. Puedes ver cómo funciona en su sitio de demostración interactiva..

2. CSSsiguiente

CSSsiguiente es un transpiler CSS que le permite utilizar la sintaxis CSS futura en los sitios actuales. W3C tiene muchas reglas nuevas de CSS que no están implementadas actualmente por los navegadores, pero podrían permitir a los desarrolladores escribir CSS más sofisticados de forma más rápida y sencilla. CSSnext se ha hecho para cerrar esta brecha.

Vale la pena echar un vistazo a sus características para ver qué puede lograr con él, por ejemplo, puede use consultas de medios personalizados, selectores personalizados, modificadores de color, filtros SVG y nuevas pseudoclases en tus diseños.

3. PreCSS

PreCSS es uno de los complementos PstCSS que funcionan como un preprocesador CSS. Hace posible aproveche un marcado similar a Sass en sus archivos de hoja de datos.

Al introducir PreCSS en su flujo de trabajo, puede utilizar variables, si-si no declaraciones, para bucles, mixins, @ampliar y @importar reglas, anidamiento y muchas otras funciones útiles en su código CSS. La documentación de Github de PreCSS le brinda instrucciones detalladas sobre cómo aprovecharla al máximo..

4. StyleLint

StyleLint es una moderna impresora CSS que Corrige y valida tu código CSS. Hace que sea fácil evitar errores y lo empuja a seguir convenciones de codificación consistentes.

StyleLint entiende la última sintaxis de CSS, por lo que puede usarse junto con el complemento PreCSS mencionado anteriormente. También le permite realizar su propia configuración, e incluso verifica si la configuración es válida.

5. Activos de PostCSS

El plugin PostCSS Assets es muy útil. gestor de activos para sus archivos CSS. Puede ser una gran opción si tiende a tener problemas con las rutas de URL, ya que los activos de PostCSS aíslan los archivos de la hoja de estilo de los cambios ambientales.

Debe definir rutas de carga, rutas relativas y una ruta base, y el complemento buscará automáticamente los activos que necesita. Por ejemplo, puede escribir el siguiente código si necesita la URL correcta de la foobar.jpg imagen:

 cuerpo fondo: resolver ('foobar.jpg'); 

Activos PostCSS también se encarga de la caché de activos, como puedes configurar el cachebuster variable a verdadero si desea que las rutas URL se cambien automáticamente en caso de que se modifique un activo. Este complemento inteligente también calcula las dimensiones (ancho y alto) de los archivos de imagen, o incluso los redimensiona usando una relación preestablecida.

6. CSSNano

Si necesita archivos CSS optimizados y minificados para un sitio de producción, vale la pena revisar CSSNano. Es un complemento modular que consta de muchos complementos PostCSS más pequeños y de responsabilidad única. No solo realiza técnicas básicas de minificación, como eliminar espacios en blanco, sino que también tiene opciones avanzadas que hacen posibles optimizaciones enfocadas..

Entre muchas otras características, CSSNano es capaz de rebasar los valores del índice z, reducir los identificadores personalizados, convertir los valores de longitud, tiempo y color, y eliminar los prefijos de proveedores obsoletos..

7. fuente mago

Si eres fanático de la tipografía sofisticada, seguramente te gustará el Fuente mago PostCSS plugin. La magia de Font Magician se basa en su capacidad de Generando automáticamente todo lo necesario. @Perfil delantero reglas.

La forma en que funciona es bastante sencilla, solo necesita agregar el Familia de fuentes: "My Fav Font"; La regla CSS a un elemento HTML, y Font Magician hace el resto del trabajo. Puede agregar Google Fonts, la copia local de una fuente, la tipografía Bootstrap y también puede cargar fuentes de forma asíncrona. Aquí está su sitio de demostración interactiva.

8. Escribe SVG

¿Alguna vez te has preguntado qué tan genial sería escribir SVG directamente en tus archivos CSS? Con la ayuda del complemento Write SVG PostCSS, puede lograr fácilmente este objetivo.

Este práctico complemento, por ejemplo, hace posible almacena tus fondos e íconos SVG en tu archivo CSS, y después Agrégalos al elemento HTML relevante de la siguiente manera:

 @svg square @rect fill: var (- color, negro); ancho: 100%; altura: 100%;  .example background: white svg (param cuadrado (- color # 00b1ff)) cubierta; 

9. Lost Grid

Cuadrícula perdida es un excelente complemento de PostCSS que te proporciona una impresionante Sistema de cuadrícula CSS eso no solo trabaja con CSS plano pero también con lenguajes preprocesadores (Sass, LESS, Stylus). Utiliza el calc () Función CSS para crear grillas hermosas que puede usar fácilmente sin perder demasiado tiempo con la personalización.

Lost Grid tiene reglas bastante sencillas, por ejemplo, definir una columna con un 25% de ancho no requiere más que este pequeño fragmento de código:

 div columna perdida: 1/4; 

10. Sprites PostCSS

los PostCSS Sprite plugin hace que sea fácil generar sprites de imagen, es decir, colecciones de imágenes colocadas en un solo archivo. Después de configurar algunas opciones, el complemento toma las imágenes de su archivo de hojas de estilo, las combina en un sprite y luego actualiza las referencias de las imágenes donde sea necesario..

Puede usar diferentes filtros y agrupadores para determinar qué imágenes desea colocar en el sprite, y puede establecer las dimensiones de la imagen de salida también..