Share
Se c'è una cosa che devi sapere su PostCSS, è così dovresti imparare di cosa si tratta e come usarlo al più presto.
In questa serie, faremo un tuffo nel PostCSS e ti illustreremo tutti i principali modi in cui puoi usarlo. Se non hai già avuto la mente gonfiata da ciò che PostCSS è capace, preparati per un nuovo coraggioso mondo CSS.
PostCSS sta crescendo in popolarità a velocità vertiginosa. Sempre più persone iniziano a capire ciò che offre, godendosi quel "momento della lampadina" quando si rendono conto di come possono usarlo in modo univoco nei propri progetti.
Nel 2014 ci sono stati un po 'meno di 1,4 milioni di download in totale per l'anno, ma da gennaio a giugno nel 2015 c'erano già stati oltre 3,8 milioni di download.
Autoprefixer, un plug-in PostCSS molto popolare, è utilizzato da Google, Shopify, Twitter, Bootstrap e CodePen. WordPress utilizza anche Autoprefixer, oltre al plugin RTLCSS. E Alibaba utilizza diversi plugin PostCSS, oltre a sviluppare il proprio e contribuire ad altri progetti di plugin.
Oltre a ciò, Mark Otto ha parlato della versione 5 di Bootstrap scritta in PostCSS:
Oh, btw-Bootstrap 4 sarà in SCSS. E se ti interessa, v5 sarà probabilmente in PostCSS perché è una schifezza sacra che suona bene.
- Mark Otto (@mdo), 23 aprile 2015
PostCSS è stato appena integrato in CodePen.io e può essere utilizzato in linea selezionandolo nelle impostazioni CSS:
PostCSS su CodePenPostCSS sta crescendo, sta crescendo rapidamente e per una buona ragione.
Che cos'è PostCSS? La migliore definizione deriva dalla pagina GitHub del progetto:
"PostCSS è uno strumento per trasformare CSS con i plugin JS. Questi plug-in possono supportare variabili e mixin, traspare la sintassi CSS futura, le immagini incorporate e altro ancora.
In breve, PostCSS prende i CSS e li trasforma in una forma di dati che può essere manipolata da JavaScript. I plugin basati su JavaScript per PostCSS eseguono quindi le suddette manipolazioni del codice. PostCSS non modifica il tuo CSS, ma apre la strada ai plugin per eseguire qualsiasi trasformazione che sono stati progettati per fare.
Non ci sono essenzialmente limiti al tipo di manipolazione che i plugin PostCSS possono applicare ai CSS. Se riesci a pensarci, probabilmente puoi scrivere un plugin PostCSS per farlo accadere.
I plugin PostCSS possono comportarsi come i preprocessori; possono ottimizzare e codice autoprefix, possono aggiungere la sintassi futura, possono eseguire il linting, possono elaborare variabili e logica, possono fornire sistemi di grid completi, possono offrire scorciatoie di codifica ... la lista è lunga e variegata.
Il fatto che tu possa fare qualsiasi cosa tu voglia con i plugin PostCSS, combinato con il fatto che PostCSS è ancora relativamente nuovo, ha portato a malintesi su cosa sia effettivamente lo strumento.
Molte persone, (inizialmente incluso me stesso), hanno avuto un'impressione incompleta di ciò che PostCSS è in realtà, e quindi hanno perso l'attenzione su ciò che PostCSS ha da offrire, o sono arrivate in ritardo al tavolo.
Quindi, prima di andare oltre, chiariamo alcune delle cose che PostCSS è non.
Numerosi sviluppatori hanno affermato che stanno abbandonando i preprocessori CSS in favore di PostCSS. Nel frattempo altri affermano che, poiché preferiscono il loro attuale preprocessore, non amano PostCSS. Tuttavia PostCSS è non un preprocessore.
Sì, puoi utilizzarlo come preprocessore se lo desideri, ma puoi anche utilizzare PostCSS senza alcuna funzionalità simile al preprocessore. Puoi anche continuare a utilizzare il tuo preprocessore preferito in congiunzione con PostCSS.
PostCSS ha la parola "post" nel nome, ma non è davvero un "post-processore". In genere, l'elaborazione successiva viene considerata come un foglio di stile finito che comprende una sintassi CSS valida / standard e l'elaborazione, per fare cose come l'aggiunta dei prefissi dei fornitori. Tuttavia PostCSS non è limitato a operare esclusivamente in questo modo. Come già detto, può comportarsi come un pre-processore.
Forse è meglio pensare a PostCSS come a un "processore". Come ha detto Andrey Sitnik, il creatore di PostCSS, su Twitter:
È tempo di ammettere i miei errori. Il termine "Postprocessor" era cattivo. Il team PostCSS ha smesso di usarlo. https://t.co/vs2AiXGoJy
- PostCSS (@PostCSS) 28 luglio 2015
E come prolifico post-SSC sviluppatore e sviluppatore di plugin Maxime Thirouin ha descritto su Twitter, piuttosto che il "post" in PostCSS che si riferisce al "post" -elaborazione, può essere meglio pensato come "CSS and beyond".
@HugoGiraudel nessuno dei contributori post-CSS sta usando più questa espressione. Ora è Postcss come "css and beyond"
- Maxime Thirouin (@MoOx), 21 luglio 2015
Ci sono alcuni plugin PostCSS eccellenti e molto conosciuti che ti permettono di scrivere in sintassi futura, cioè usando i CSS che saranno disponibili in futuro ma non ancora ampiamente supportati. Tuttavia PostCSS non riguarda intrinsecamente il supporto della sintassi futura.
Alcuni sviluppatori hanno espresso riluttanza a usare PostCSS, dicendo che è perché non sono sicuri di sentirsi a proprio agio con la scrittura della sintassi futura. Tuttavia, scrivere la sintassi futura è solo uno dei molti modi in cui puoi utilizzare PostCSS.
Se lo desideri, puoi utilizzare PostCSS per rivoluzionare completamente i tuoi processi di sviluppo senza una linea di sintassi futura in vista.
Il successo del plug-in Autoprefixer ha portato alla percezione comune di PostCSS come qualcosa che si esegue sul CSS completato per ripulirlo e ottimizzarlo per garantire la massima velocità e compatibilità cross-browser. Questa è la percezione che ho avuto io stesso, fino a quando ho saputo della vasta gamma di altre cose che puoi ottenere con PostCSS.
Sì, ci sono molti fantastici plugin che offrono ottimi processi di pulizia e ottimizzazione, ma questi sono solo una minima parte di ciò che viene offerto.
La cosa più avvincente di PostCSS è che non è limitato a nessun tipo di funzionalità; rappresenta un set di funzionalità completamente personalizzabile e configurabile potenzialmente illimitato.
Considerare i plugin WordPress come un parallelo. I plug-in e-commerce sono molto popolari, ma nessuno considera WordPress come un motore di e-commerce, e i pregi di WordPress non sono valutati in base ai suoi plugin di e-commerce.
Nel caso di PostCSS, mi piace pensare che sia come il pane che usi per fare un sandwich. Di per sé non sembra molto, ma è esattamente come dovrebbe essere, e questo apparente "vuoto" è il motivo per cui ha così tanto potenziale. È la capacità di un'infinita varietà di riempimenti che ti dà qualcosa di straordinario.
Un panino, ieriHo provato un sandwich al burro di arachidi e non mi è piaciuto? Non è assolutamente un motivo per bandire per sempre il pane e tutti i tipi di sandwich. Invece, passa a provare il prossimo riempimento e potresti scoprire qualcosa che diventa una nuova parte della tua vita quotidiana.
PostCSS è un approccio completamente diverso ai CSS. Un frontend contractor di Londra con cui ho parlato l'ha descritto come "un coltellino svizzero per la produzione di CSS" e questa è una descrizione del tutto azzeccata.
Diamo un'occhiata ad alcune delle cose che rendono PostCSS così speciale.
Incredibile come PostCSS, è la lunga lista di diversi plugin che lo fanno davvero brillare. Quando leggi l'elenco dei plugin disponibili sulla pagina GitHub di PostCSS troverai una varietà di funzionalità che non sono mai state contenute in uno spazio prima.
Ci sono plugin per la sintassi futura, che ti permettono di usare cose come le funzioni colore, gradienti conici, proprietà personalizzate, selettori personalizzati, alias personalizzati per le query multimediali e molto altro.
Esistono plugin di fallback per creare una sintassi legacy, come ad esempio l'aggiunta di fallback esadecimali RGBA () colori, aggiungendo filtri opacity per IE8, convertendo selettori di elementi psuedo per IE8 e generando px fallback per rem unità.
Sono disponibili più di venti plug-in di estensione del linguaggio, tra cui mixaggi, variabili, condizionali, per e ogni loop, generazione di classi di stile BEM e SUIT e molti altri.
È disponibile una selezione di plug-in per la gestione del colore, che consente la conversione da un formato di colore a un altro, la modifica dei livelli alfa, la combinazione di colori, la generazione di combinazioni di colori daltonici, per citarne alcuni.
Esistono sistemi di rete, strumenti di ottimizzazione, plugin che aggiungono scorciatoie e abbreviazioni, linters e altri plugin di analisi e reporting.
In alcuni paragrafi non è possibile trasmettere la diversità in continua espansione della selezione di plug-in corrente, quindi assicurati di controllare l'elenco per te stesso.
Il rovescio della medaglia per l'incredibile elenco di plugin disponibili per PostCSS è che puoi usarne il numero o il numero minimo che desideri.
Voglio solo usare PostCSS per rendere il tuo CSS più efficiente e adatto ai browser? Carica alcuni plugin di ottimizzazione e sei a posto.
Vuoi utilizzare PostCSS esclusivamente come preprocessore? Utilizza invece alcuni plug-in di estensione della lingua e tutto è pronto.
La filosofia di base di PostCSS è la modularità a grana fine, per la quale non ci sono plugin hulking che gestiscono più funzioni. Invece, viene creato un plugin per funzione, e da lì possono essere assemblati in pacchetti di plugin con funzionalità comunemente a tema.
Ad esempio, puoi selezionare una selezione di plug-in per le estensioni della lingua e creare il tuo preprocessore personalizzato. In alternativa, puoi caricare il pacchetto PreCSS che ti consente di accedere automaticamente a diversi plug-in di estensione della lingua contemporaneamente.
Qualunque sia il modo in cui vuoi utilizzare PostCSS, puoi eseguire solo i plug-in necessari per i tuoi scopi specifici, il che significa che non devi trascinare le funzionalità inutilizzate come peso morto.
Ci sono due ragioni principali per cui i test PostCSS sono molto veloci nei benchmark. Uno è il fatto che devi solo caricare i plug-in necessari, come descritto sopra. L'altro è che funziona su JavaScript.
Puoi eseguire questi benchmark utilizzando https://github.com/postcss/benchmark
Il risultato di uno di questi benchmark, test di analisi, regole nidificate, mixin, variabili e matematica, era:
PostCSS: 36 ms Rework: 77 ms (2,1 volte più lento) libsass: 136 ms (3,8 volte più lento) Meno: 160 ms (4,4 volte più lento) Stylus: 167 ms (4,6 volte più lento) Stylecow: 208 ms (5,7 volte più lento) Ruby Sass: 1084 ms (30,1 volte più lento)
I plugin per PostCSS sono scritti in JavaScript e, in quanto tale, chiunque possa scrivere JavaScript può creare un plug-in per qualsiasi scopo essi desiderino. Per darti un'idea, non mi considero uno sviluppatore JavaScript hard-core in alcun modo, ma dopo aver scoperto PostCSS sono riuscito a realizzare il mio primo plug-in pienamente funzionale nel giro di poche ore.
I progetti di preprocessore come Stylus, Sass e LESS fanno un ottimo lavoro, ma non possono essere tutto per tutti. Devono decidere quali funzionalità saranno meglio servite nel loro insieme di utenti. Se esiste una funzionalità che vorresti avere, puoi fare una richiesta di funzionalità ma potrebbe o meno essere considerata in linea con le esigenze più ampie del progetto.
Anche se si fa una richiesta di funzionalità che è ritenuta adeguata, i manutentori dei progetti sono in genere volontari non pagati che potrebbero non avere il tempo per svilupparlo. Quindi se non hai il livello di abilità per crearlo detto caratteristica, sei sfortunato.
D'altro canto con PostCSS, non devi chiedere a nessuno. Se vuoi una nuova funzione, puoi procedere e realizzarla. Dalla mia esperienza, il livello di esperienza JavaScript richiesto per creare un plug-in PostCSS sarebbe gestibile da molti sviluppatori front-end.
In un successivo tutorial di questa serie, passeremo alla creazione di un plugin PostCSS di base. Anche se non ti consideri un esperto di JavaScript, penso che troverai la creazione di plug-in PostCSS abbastanza realistica.
Una parte molto ampia dei plugin PostCSS non richiede l'uso della sintassi personalizzata, come è tipico dei preprocessori. Piuttosto, possono essere applicati ai normali CSS. Ciò significa che è possibile utilizzare PostCSS con qualsiasi file CSS di cui si è in possesso, come fogli di stile completati da un framework front-end, dal progetto di qualcun altro o da un file Normalize.css ad esempio.
Significa anche che non sei bloccato da progetti che utilizzano un particolare preprocessore, sia Stylus, Sass o LESS, perché puoi sempre applicare PostCSS al CSS compilato. Ad esempio, se si utilizza Foundation tramite Sass, è possibile eseguire l'ottimizzazione e i plugin di sintassi futuri dopo aver generato i file CSS del progetto.
Stiamo anche iniziando a vedere intere librerie create con PostCSS, dove in passato potevano essere state scritte in Stylus, Sass o LESS.
Ad esempio, Cory Simmons stava originariamente mantenendo entrambe le versioni Stylus e Sass del suo sistema di grid Lost, in modo che gli utenti di entrambi i preprocessori potessero accedere. Successivamente ha portato il progetto su PostCSS, il che significa che ora tutti possono utilizzare Lost, compresi gli utenti Stylus e Sass, ma anche MENO utenti e persone che non lavorano affatto con un preprocessore.
Essendo basato su JavaScript, PostCSS non richiede l'installazione di Ruby e ha integrazioni pronte per diversi strumenti di sviluppo.
Accentsconagua
@ regole nel tuo CSSinstallazione di npm. Ciò facilita la condivisione semplice dei progetti PostCSS, nonostante l'enorme numero di possibili variazioni nella configurazione dei plugin.Vedremo come è possibile ottenere l'installazione per utilizzare PostCSS nella prossima sezione "Guida rapida" di questa serie.
La prima cosa che devi sapere è che PostCSS sta prendendo piede velocemente, e per una buona ragione, quindi ora è il momento di iniziare a capire chiaramente come può aiutare i tuoi processi di sviluppo.
In questa serie daremo il via a come iniziare con PostCSS tramite le esercitazioni:
Da lì daremo uno sguardo da vicino ai vari modi in cui è possibile utilizzare PostCSS nelle esercitazioni:
Infine, concluderemo portandoti attraverso creando il tuo plugin PostCSS di base.
Potresti notare una notevole assenza di un'esercitazione sull'utilizzo di PostCSS per abilitare i futuri CSS, specialmente considerando che molte persone vedono i due come quasi sinonimi.
Il motivo di questa assenza temporanea è il plugin principale per il futuro CSS, cssnext, sembra che stia per subire una trasformazione importante che potrebbe cambiare in modo significativo i passaggi necessari per utilizzarlo. In quanto tale, terremo d'occhio e offriremo un nuovo tutorial una volta che il progetto ha fatto la sua transizione.
Quindi cominciamo! Nel prossimo tutorial entreremo direttamente nella nostra "Guida rapida" e ti mostreremo i modi più rapidi per iniziare a utilizzare PostCSS. Ci vediamo lì!
