10 fantastici plugin PostCSS per creare una procedura guidata CSS

PostCSS è uno strumento incredibilmente versatile che rende possibile trasforma gli stili CSS con i plugin JavaScript. La sua flessibilità sta nel modo in cui è costruita.

La parte centrale di PostCSS è un modulo Node.js che puoi installare con npm e ha un ecosistema di oltre 200 plug-in che puoi scegliere di utilizzare nel tuo progetto.

PostCSS non è né un preprocessore né un postprocessore, in quanto diversi plug-in PostCSS possono rientrare in una di queste categorie o in entrambi; dipende interamente da te su ciò che ne fai. Con PostCSS, tu non ho bisogno di imparare una sintassi diversa come nel caso di Sass o LESS; puoi immediatamente iniziare a usarlo.

PostCSS prende il tuo file CSS esistente e lo trasforma in dati leggibili da JavaScript, quindi i plug-in JavaScript eseguono le modifiche e PostCSS restituisce la versione modificata del file originale. Sembra fantastico, non è vero??

In questo post daremo un'occhiata a 10 plugin PostCSS per darti un'idea di alcune delle grandi cose che puoi ottenere con questo fantastico strumento.

1. Autoprefixer

Autoprefixer è probabilmente il plug-in PostCss più conosciuto, poiché è utilizzato da aziende tecnologiche note come Google, Twitter e Shopify. esso aggiunge i prefissi dei fornitori alle regole CSS dove è necessario.

Autoprefixer utilizza i dati da Can I Use. In questo modo non viene datato e può sempre applicare le regole più recenti. Puoi controllare come funziona sul suo sito demo interattivo.

2. CSSnext

CSSnext è un transpiler CSS che ti permette di usare la futura sintassi CSS sui siti attuali. W3C ha molte nuove regole CSS che non sono attualmente implementate dai browser, ma potrebbe consentire agli sviluppatori di scrivere CSS più sofisticati più velocemente e più facilmente. CSSnext è stato creato per colmare questa lacuna.

Vale la pena dare un'occhiata alle sue funzionalità per vedere cosa si può realizzare con esso, ad esempio è possibile utilizzare query multimediali personalizzate, selettori personalizzati, modificatori di colore, filtri SVG e nuove pseudoclassi nei tuoi progetti.

3. PreCSS

PreCSS è uno dei plugin PstCSS che funziona come un preprocessore CSS. Rende possibile approfitta di un markup Sass simile ai tuoi file del foglio.

Introducendo PreCSS nel tuo flusso di lavoro puoi usare le variabili, se altro dichiarazioni, per loop, mixins, @estendere e @importare regole, nidificazione e molte altre utili funzionalità nel codice CSS. La documentazione Github di PreCSS fornisce istruzioni dettagliate su come sfruttarla al meglio.

4. StyleLint

StyleLint è un moderno linter CSS che revisiona e convalida il tuo codice CSS. Semplifica gli errori e ti spinge a seguire convenzioni di codifica coerenti.

StyleLint comprende la più recente sintassi CSS, quindi può essere utilizzato insieme al plug-in PreCSS precedentemente menzionato. Permette anche di creare la tua configurazione e controlla anche se le tue impostazioni sono valide.

5. Attività PostCSS

Il plugin PostCSS Assets è molto utile asset manager per i tuoi file CSS. Può essere un'ottima scelta se tendi ad avere problemi con i percorsi URL, poiché PostCSS Assets isola i tuoi fogli di stile da modifiche ambientali.

È necessario definire percorsi di carico, percorsi relativi e un percorso di base, e il plug-in cercherà automaticamente le risorse necessarie. Ad esempio, puoi scrivere il seguente codice se hai bisogno dell'URL appropriato di foobar.jpg Immagine:

 body background: resolve ('foobar.jpg'); 

Anche le attività PostCSS si prende cura della cache delle risorse, come puoi impostare il cachebuster variabile su true se si desidera che i percorsi URL vengano modificati automaticamente nel caso in cui una risorsa venga modificata. Questo plug-in intelligente calcola anche le dimensioni (larghezza e altezza) dei file immagine, o anche le ridimensiona utilizzando un rapporto predefinito.

6. CSSNano

Se hai bisogno di file CSS ottimizzati e minimizzati per un sito di produzione, vale la pena di provarlo CSSNano. È un plug-in modulare che consiste in molti plugin PostCSS a responsabilità limitata più piccoli. Non solo esegue tecniche di minimizzazione di base come la rimozione di spazi bianchi, ma ha anche opzioni avanzate che rendono possibili ottimizzazioni mirate.

Tra le molte altre funzionalità, CSSNano è in grado di ridefinire i valori di z-index, riducendo gli identificatori personalizzati, convertendo lunghezza, valori di tempo e colore e rimuovendo i prefissi dei fornitori obsoleti.

7. Font Magician

Se sei un fan della tipografia sofisticata, ti piacerà sicuramente Font Magician Plugin PostCSS. La magia di Font Magician si basa sulla sua capacità di generando automaticamente tutto il necessario @ Font-face regole.

Come funziona è piuttosto semplice, devi solo aggiungere il font-family: "My Fav Font"; Regola CSS per un elemento HTML e Font Magician fa il resto del lavoro. Può aggiungere Google Fonts, la copia locale di un font, la tipografia Bootstrap e anche caricare i caratteri in modo asincrono. Ecco il suo sito demo interattivo.

8. Scrivi SVG

Ti sei mai chiesto quanto sarebbe bello scrivere SVG direttamente nei tuoi file CSS? Con l'aiuto del plugin Write SVG PostCSS puoi raggiungere facilmente questo obiettivo.

Questo pratico plugin, per esempio, rende possibile archivia gli sfondi e le icone SVG nel tuo file CSS, e più tardi aggiungili all'elemento HTML pertinente nel seguente modo:

 @svg square @rect fill: var (- colore, nero); larghezza: 100%; altezza: 100%; . esempio background: bianco svg (quadrato param (- colore # 00b1ff)) copertina; 

9. Griglia perduta

Lost Grid è un ottimo plug-in PostCSS che ti offre un'impressionante esperienza Sistema di griglia CSS questo non solo funziona con semplici CSS ma anche con lingue del preprocessore (Sass, LESS, Stylus). Usa il Calc () Funzione CSS per creare splendide griglie che puoi facilmente utilizzare senza spendere troppo tempo con la personalizzazione.

Lost Grid ha regole molto semplici, ad esempio la definizione di una colonna con larghezza del 25% non richiede più di questo piccolo frammento di codice:

 div lost-column: 1/4; 

10. Sprites PostCSS

Il PostCSS Sprite il plugin lo rende facile generare sprite di immagini, cioè raccolte di immagini inserite in un singolo file. Dopo aver impostato alcune opzioni, il plugin prende le immagini dal file del foglio di stile, le unisce in uno sprite, quindi aggiorna i riferimenti dell'immagine ovunque sia necessario.

Puoi usare diversi filtri e cernie per determinare quali immagini vuoi inserire nello sprite, e puoi anche impostare le dimensioni dell'immagine di output.