Share
Come avrai raccolto dalle voci precedenti di questa serie, PostCSS è tutto basato sui plugin. I plug-in che scegli definiranno completamente la tua esperienza con PostCSS.
Dato che sono così fondamentali e integrali, prima di passare alla produzione effettiva di fogli di stile tramite PostCSS, daremo un'occhiata a come esplorare l'ecosistema di plug-in PostCSS. Grazie a ciò avrai anche un'idea di quanto sia potente PostCSS e di come offre funzionalità che non possono essere ugualmente create attraverso altri mezzi esistenti.
Tratteremo dove puoi andare per tenere sotto controllo i plug-in più recenti e più grandi, le categorie in cui rientrano in genere questi plug-in e le considerazioni su come caricare tutti questi plug-in in progetti in modo logico.
Quando inizi a lavorare con PostCSS ci sono tre posizioni da tenere d'occhio per trovare ottimi plugin.
La pagina principale del repository Github PostCSS attualmente mantiene un elenco completo di plug-in categorizzati. Questa lista tende ad essere aggiornata frequentemente, quindi è un posto abbastanza affidabile dove andare e vedere quali plugin sono disponibili per diversi aspetti dello sviluppo.
https://github.com/postcss/postcss#pluginsUn'aggiunta relativamente nuova, e molto gradita, al mondo PostCSS è il sito postcss.parts, che fornisce un catalogo ricercabile di plugin PostCSS.
http://postcss.partsIn questo momento PostCSS sta vedendo un nuovo e interessante plugin che viene rilasciato regolarmente. Le due posizioni precedenti non evidenziano nuovi plug-in, quindi a colpo d'occhio non saprai se ci sono elementi che non hai mai visto prima. Per questo motivo, è una buona idea seguire o visitare frequentemente @PostCSS su Twitter.
https://twitter.com/postcssL'ampiezza delle funzionalità dei plugin che possono funzionare con PostCSS è enorme, quindi è una buona idea avere un'introduzione al generale tipi di plug-in che probabilmente incontrerai prima di metterti alla prova con qualcuno di loro.
La natura fondamentale di PostCSS è che fornisce l'elaborazione CSS modulare. Pertanto, i singoli plugin sono incoraggiati a coprire solo un piccolo insieme di funzionalità strettamente definite. I plugin multifunzionali megalitici che fanno tutto in una volta sono scoraggiati.
Detto questo, a volte si desidera incorporare un lungo elenco di funzionalità in un progetto e preferiremmo non dover installare e configurare individualmente venti diversi plug-in. È qui che entrano in gioco i "branchi". I pacchetti riuniscono diversi plugin modulari sotto un ombrello tematico, consentendo a tutti di essere installati e distribuiti contemporaneamente.
Ad esempio, il pacchetto PreCSS combina nove plugin PostCSS separati per creare funzionalità simili a Sass. Il pacchetto cssnano utilizza circa venti plugin PostCSS per fornire minificazione e ottimizzazione CSS. Usando questi pacchetti si risparmia di dover installare e caricare ciascuno dei plugin manualmente.
Il futuro CSS ti consente di scrivere la sintassi che sappiamo è nelle specifiche del W3C, ma potrebbe non essere ancora completamente supportata nei browser.
Ad esempio, potresti voler usare la notazione esadecimale a otto o quattro cifre imminente per creare colori opachi. Per generare un blu leggermente trasparente puoi usare un codice colore simile # 0000ffcc, o la sua forma abbreviata # 00fc, ed esegui il plugin postcss-color-hex-alpha per convertirlo nel formato ampiamente supportato rgba (0, 0, 100%, 0.8).
La presenza più importante nel futuro CSS PostCSS è il pacchetto cssnext, che porta una grande quantità di CSS futuri compatibili con le specifiche. Tuttavia, attualmente il suo sviluppatore Maxime Therouin sta portando il pacchetto attraverso una importante transizione nel modo in cui funziona. Pertanto, ci riserviamo il fuoco di portarti un futuro tutorial CSS fino al completamento della transizione.
Nei casi in cui il futuro dei CSS sta facendo funzionare il codice di domani nei browser di oggi, i fallback riguardano essenzialmente il funzionamento del codice di oggi nei browser di ieri. In un mondo perfetto non dovremmo mai pensare a browser vecchi e obsoleti, ma la realtà è che ci sono ancora alcuni progetti per i quali è fondamentale supportare i browser legacy. La categoria di fallback dei plug-in PostCSS può aiutare dove è il caso.
Tutti questi plugin funzionano a mani libere, con il quale intendo che scrivi il tuo codice in base agli standard attuali, ei plug-in troveranno il codice che ha bisogno di fallback legacy e li inserirà automaticamente come richiesto.
Ad esempio, puoi avere colori flat aggiunti come fallback per RGBA () colori con il plugin postcss-color-rgba, o aggiungere fallback compatibili con IE8 per opacità tramite il plugin postcss-opacity. Il più noto di questi plug-in è Autoprefixer, che aggiunge i prefissi dei fornitori come richiesto, in base ai dati di CanIUse.com.
Imparerai di più sui plug-in fallback nella prossima esercitazione "For Cross Browser Compatibility" di questa serie.
I plug-in di estensione della lingua aggiungono funzionalità ai CSS che altrimenti non sarebbero presenti. Per fare un confronto, si potrebbe considerare che la maggior parte dei preprocessori sia interamente costituita da estensioni di lingua. In effetti, gli utenti di Sass, Stylus e LESS probabilmente si sentiranno a loro agio con molte estensioni di linguaggio PostCSS, come quelle che aggiungono mixaggi, variabili, condizionali, cicli, annidamento, estensione e così via..
Poiché PostCSS è completamente flessibile, tuttavia, ci sono anche estensioni di lingua che offrono funzionalità non comunemente presenti nei pre-processori. Ad esempio, il plugin postcss-bem aggiunge una sintassi specifica per la creazione di CSS che segue la metodologia BEM / SUIT, (ne parlerò più avanti in un tutorial successivo). Il plugin postcss-define-property ti consente di creare proprietà personalizzate o ridefinire le proprietà native. E il plugin postcss-match ti consente di utilizzare non solo i condizionali, ma la logica di corrispondenza del pattern nel tuo codice.
Con questa varietà tutte le indicazioni sono che PostCSS maturerà al punto in cui può fornire molte delle funzionalità che molti di noi cercano nei pre-processori, ma anche una notevole funzionalità oltre a quella.
Molti dei plugin di colori attualmente disponibili per PostCSS si occupano della trasformazione dei colori da un formato in un altro, ad esempio da # hex.a a RGBA (), HCl (H, C, L) a #rgb, o pantone a #rgb. Inoltre, alcuni dei plugin più utili gestiscono la manipolazione del colore, come la miscelazione di due colori o il ridimensionamento della luminosità o dell'oscurità di essi.
Uno dei miei preferiti in particolare consente di prendere la combinazione di colori esistente, quindi di generare una versione così come apparirebbe alle persone con forme specifiche di daltonismo. Non c'è niente come sperimentare qualcosa di prima mano per aiutarti a capire quanto sono accessibili i tuoi progetti.
Entreremo più nel dettaglio sui plug-in di colore nelle nostre esercitazioni di pre-elaborazione, stenografia e "miscellaneous goodies" successive.
Questa categoria di plugin gestisce molte attività di ottimizzazione, come il riempimento dei dati Base64, la generazione di fogli sprite CSS e l'ottimizzazione SVG. Troverai anche diversi altri tipi di strumenti per immagini e font, come la conversione automatica da SVG a PNG per IE8, generazione automatica di immagini WebP e inclusione per i browser di supporto, @ Font-face scorciatoie, scorciatoie di supporto per la retina e altro ancora.
Scoprire che i sistemi di grid potrebbero essere scritti in PostCSS, senza bisogno di caricare fogli di stile pre-scritti o usare mixin di pre-processori, è stata la prima cosa che mi ha davvero aperto gli occhi su quanto sia potente PostCSS. In precedenza avevo pensato che PostCSS riguardasse principalmente il filtraggio e la modifica dei CSS esistenti, tuttavia i sistemi di griglie mostrano che può essere utilizzato per creare intere librerie di stili esterni.
Al momento sono disponibili tre sistemi di rete per PostCSS:
I plug-in di ottimizzazione PostCSS rientrano in due categorie generali: minificazione e modifica del codice. Tramite questi plug-in è possibile eseguire attività di minificazione come l'eliminazione degli spazi bianchi e dei commenti e si possono anche eseguire modifiche più complesse come combinare query multimediali corrispondenti, inlining @importare fogli di stile, ottimizzazione dei pesi dei caratteri, rimozione di regole vuote o duplicate e così via.
Tratteremo di più su questa categoria di plugin PostCSS nel prossimo tutorial "For Minification and Optimization".
Come utente di un preprocessore, ho sempre trovato uno dei maggiori vantaggi era la possibilità di ridurre la quantità di codice che dovevo scrivere usando variabili e mixin. Tramite PostCSS ho scoperto mezzi ancora più estesi per rendere più efficiente la scrittura del codice tramite la lunga lista di plugin di scorciatoie e abbreviazioni disponibili.
Puoi scegliere di usare la scorciatoia per le proprietà, ad esempio definendo la tua o usando la stenografia esistente w invece di larghezza, h invece di altezza e così via. Puoi produrre @ Font-face codice, trasformare codice, triangoli e cerchi tutti in una riga ciascuno. E puoi scorciatoire tutti i tipi di attività comuni, inclusi lo stile dei collegamenti, centratura, correzione, posizionamento, dimensionamento, spaziatura e emissione dei codici colore.
Entreremo in questi plugin in modo più approfondito nel tutorial "Scorciatoie e abbreviazioni".
PostCSS può anche essere utilizzato per qualcosa di più che trasformare i CSS, può anche essere usato per fornire un feedback mentre sviluppi il tuo CSS. Alcuni dei plug-in di analisi e reporting disponibili includono un linter per il codice BEM / SUIT, un plugin per darti una scomposizione del tuo codice tramite CSSstats, "DoIUse" per farti sapere in che modo il tuo codice si allinea con i dati di Can I Use, e un generatore di file Modernizr.
Ci sono alcuni ottimi plugin PostCSS che non si adattano perfettamente a una categoria specifica, ma sono troppo belli per essere passati. Ad esempio, abbiamo una guida in stile postcss che genera automaticamente una guida di stile basata sul tuo CSS. C'è anche il plugin rtlcss, usato da WordPress, che genera una versione da destra a sinistra del tuo foglio di stile.
Tratteremo alcuni di questi fantastici plugin nel tutorial "Goodies vari".
La categoria "divertimento" include gemme come postcss-spiffing che ti permette di usare l'ortografia del Regno Unito, per esempio colore invece di colore, e sintassi di buon senso come !per favore invece di !importante.
È improbabile che i plug-in di questa categoria vengano utilizzati in un progetto reale, tuttavia un vantaggio reale che offrono è rappresentato da esempi facilmente comprensibili per gli aspiranti sviluppatori di plug-in. Essendo abbastanza semplici e brevi, sono perfetti per dare un'occhiata dentro e vedere l'essenziale di come sono fatti i plugin PostCSS.
Una delle considerazioni principali da fare quando si carica la serie di plugin PostCSS è l'ordine in cui vengono eseguiti. Dovrai mettere in pausa e pensare attraverso il tuo elenco, determinando se un plugin potrebbe aver bisogno di correre dietro ad un altro per poter fare ciò che vuoi.
Ad esempio, potresti usare un plugin come postcss-simple-vars che aggiunge il supporto per le variabili, e potresti usarlo per memorizzare un RGBA () valore in questo modo:
/ * codice sorgente * / $ color: rgba (0, 0, 0, 0.5); .style background: $ color; / * compila in: * / .style background: rgba (0, 0, 0, 0.5);
Potresti anche voler usare un plugin come postcss-color-rgba-fallback per aggiungere un hexcode piatto come fallback, dandoti:
/ * compila in: * / .style background: # 000; background: rgba (0, 0, 0, 0.5);
In questo caso dovresti assicurarti di aver eseguito il plugin delle variabili prima il plugin di fallback.
Se avessi eseguito prima il plugin di fallback, lo troverei sfondo: $ colore; nel tuo CSS e non sai che c'era un RGBA () valore per farlo funzionare.
Tuttavia, eseguendo prima il plugin delle variabili, quando verrà eseguito il plug-in di fallback, verrà trovato background: rgba (0, 0, 0, 0.5); e vai avanti e aggiungi il fallback richiesto.
L'ordine di caricamento per i plug-in è qualcosa che cambierà con ogni set di plug-in, quindi potresti trovare che devi fare qualche piccola prova a volte per far funzionare tutto insieme.
Per riassumere l'esplorazione dei plugin PostCSS:
Abbiamo completato la nostra guida "Guida rapida" a PostCSS e siamo pronti per entrare in pratica e iniziare a produrre un codice CSS reale.
Nel prossimo tutorial inizieremo con l'utilizzo di PostCSS per generare codice compatibile cross-browser tramite l'inserimento automatico dei prefissi dei fornitori e una serie di fallback per le proprietà con i browser legacy, in particolare IE8.
Ci vediamo nel prossimo tutorial!
Accentsconagua