Share
Dacă există un lucru de care trebuie să știți cu adevărat despre PostCSS, asta e ar trebui să aflați ce este și cum să îl utilizați cât mai curând posibil.
În această serie, vom face o scufundare profundă în PostCSS și vom trece prin toate căile majore pe care le puteți folosi. Dacă nu ți-ai dat deja minte de ce postCSS este capabil, pregătește-te pentru o lume curajoasă a CSS.
PostCSS a crescut în popularitate la o viteză de criză. Din ce în ce mai mulți oameni încep să înțeleagă ceea ce oferă, bucurându-se de acel "moment bec" atunci când își dau seama cum o pot folosi în mod unic în propriile lor proiecte.
În 2014, au existat puține sub 1,4 milioane de descărcări în total pentru anul, dar din ianuarie până în iunie, în 2015, au existat deja peste 3,8 milioane de descărcări.
Autoprefixer, un plugin foarte popular PostCSS, este utilizat de Google, Shopify, Twitter, Bootstrap și CodePen. WordPress utilizează, de asemenea, Autoprefixer, precum și pluginul RTLCSS. Și Alibaba utilizează mai multe pluginuri PostCSS, precum și dezvoltarea propriilor lor și contribuția la alte proiecte de plugin.
Dincolo de asta, Mark Otto a vorbit despre versiunea 5 Bootstrap fiind scrisă în PostCSS:
Oh, btw-Bootstrap 4 va fi în SCSS. Și dacă vă pasă, v5 va fi probabil în PostCSS pentru că prostiile sfinte care sună rece.
- Mark Otto (@mdo) 23 aprilie 2015
PostCSS tocmai a fost integrată în CodePen.io și poate fi utilizată în linie prin selectarea acesteia în setările CSS:
PostCSS pe CodePenPostCSS este în creștere, este în creștere rapidă, și pentru un motiv bun.
Deci, ce este PostCSS? Cea mai bună definiție vine de la pagina proprie a proiectului GitHub:
"PostCSS este un instrument pentru transformarea CSS-ului cu plug-in-uri JS. Aceste pluginuri pot suporta variabile și mixuri, transpun sintaxa CSS viitoare, imagini inline și multe altele.
Pe scurt, PostCSS ia CSS și o transformă într-o formă de date pe care JavaScript o poate manipula. Pluginurile bazate pe JavaScript pentru PostCSS execută apoi aceste manipulări de cod. PostCSS în sine nu vă schimbă CSS-ul, ci doar deschide calea pentru ca plugin-urile să efectueze transformările pe care le-au fost proiectate să le facă.
Nu există, în esență, nicio limitare a tipului de manipulare. Pluginurile PostCSS se pot aplica la CSS. Dacă vă puteți gândi la asta, puteți scrie probabil un plugin PostCSS pentru a face acest lucru.
Pluginurile PostCSS se pot comporta ca preprocesoarele; ei pot optimiza și codul autoprefix, pot adăuga sintaxa viitoare, pot executa lustruire, pot procesa variabile și logică, pot oferi sisteme complete de rețea, pot oferi comenzi rapide de codare ... lista este lungă și variată.
Faptul că puteți face exact ceea ce doriți cu pluginurile PostCSS, combinat cu faptul că PostCSS este încă relativ nou, a dus la unele concepții greșite despre ceea ce este instrumentul de fapt.
Mulți oameni (inclusiv eu inițial) au avut o impresie incompletă despre ceea ce este de fapt PostCSS și, prin urmare, au pierdut fie ceea ce PostCSS are de oferit, fie au ajuns târziu la masă.
Deci, înainte de a merge mai departe, să clarificăm câteva dintre lucrurile pe care le are PostCSS nu.
Numeroși dezvoltatori au declarat că abandonează preprocesoarele CSS în favoarea PostCSS. Între timp, alții afirmă că pentru că preferă preprocesorul lor actual, ei nu-i plac PostCSS. Cu toate acestea, PostCSS este nu un preprocesor.
Da, îl puteți folosi absolut ca un preprocesor dacă doriți, dar puteți utiliza și PostCSS fără nici o funcționalitate de tip preprocessor. Puteți să folosiți chiar și proprocesorul dvs. preferat conjuncție cu PostCSS.
PostCSS are cuvântul "post" în nume, dar nu este chiar "postprocesor". Postprocesarea este de obicei văzută ca luând o foaie de stil finalizată cuprinzând o sintaxă validă / standard CSS și procesând-o, pentru a face lucruri cum ar fi adăugarea prefixelor furnizorilor. Cu toate acestea, PostCSS nu este limitat la operarea exclusiv în acest fel. După cum sa menționat mai sus, se poate comporta și ca un pre-procesor.
Este mai bine să te gândești doar la postCSS ca la un "procesor". După cum a spus Andrey Sitnik, creatorul PostCSS, pe Twitter:
Este timpul să recunosc greșelile mele. Termenul "postprocesor" a fost rău. Echipa PostCSS sa oprit să o folosească. https://t.co/vs2AiXGoJy
- PostCSS (@PostCSS) 28 iulie 2015
Și, așa cum a fost descris pe Twitter de către contribuitorul și dezvoltatorul plugin-ului PostCSS, Maxime Thirouin, în loc de "postul" din PostCSS referindu-se la procesarea "postului", poate fi mai bine gândit ca "CSS și dincolo".
@HugoGiraudel nimeni în colaboratorii postcss nu mai folosește această expresie. Acum este Postcss ca "css și dincolo"
- Maxime Thirouin (@MoOx) 21 iulie 2015
Există câteva pluginuri postCSS excelente și foarte cunoscute care vă permit să scrieți în sintaxa viitoare, adică folosind CSS care va fi disponibil în viitor, dar nu este încă acceptat pe scară largă. Cu toate acestea, PostCSS nu are în mod inerent susținerea sintaxei viitoare.
Unii dezvoltatori și-au exprimat reticența față de utilizarea PostCSS, spunând că este pentru că nu sunt siguri că se simt confortabil în scrierea unei sintaxe viitoare. Cu toate acestea, scrierea sintaxei viitoare este doar una dintre multele moduri în care puteți utiliza PostCSS.
Dacă alegeți acest lucru, puteți utiliza PostCSS pentru a vă revoluționa complet procesele de dezvoltare fără a vedea o linie de sintaxă viitoare.
Succesul plug-in-ului Autoprefixer a dus la perceperea comună a PostCSS ca ceva pe care îl executați pe CSS completat pentru ao curăța și optimiza pentru compatibilitatea cu viteza și browserul încrucișat. Aceasta este percepția pe care am avut-o eu, până când am aflat despre vasta serie de alte lucruri pe care le puteți realiza cu PostCSS.
Da, există multe pluginuri fantastice care oferă procese excelente de curățare și optimizare, dar acestea sunt doar o fracțiune din ceea ce este oferit.
Cel mai convingător lucru despre PostCSS este că nu se limitează la niciun tip de funcționalitate; reprezintă un set complet de funcționalități care pot fi personalizate și configurabile, care sunt potențial nelimitate.
Luați în considerare pluginurile WordPress ca o paralelă. Pluginurile de comerț electronic sunt foarte populare, însă nimeni nu consideră că WordPress este un motor de comerț electronic, iar meritele WordPress nu sunt evaluate pe baza pluginurilor sale de comerț electronic.
În cazul PostCSS, îmi place să mă gândesc la asta ca la o pâine pe care o folosiți pentru a face un sandviș. În sine, nu pare prea mult, dar exact așa este menit să fie, iar această "vid" aparentă este motivul pentru care are atâta potențial. Este capacitatea pentru o varietate infinită de umpluturi care vă oferă ceva uimitor.
Un sandwich, ieriA încercat un sandviș cu unt de arahide și nu mi-a plăcut? Nu este absolut nici un motiv să jurați pâinea și toate tipurile de sandvișuri pentru totdeauna. În schimb, treceți la încercarea următoarei umpleri și puteți descoperi ceva care devine o nouă parte minunată a vieții de zi cu zi.
PostCSS este o abordare complet diferită față de CSS. Un contractor de frontieră de la Londra am vorbit să îl descriu ca fiind "un cuțit elvețian pentru producția de CSS" și asta este o descriere foarte aptă.
Să aruncăm o privire la câteva lucruri care fac PostCSS atât de special.
Uimitor ca PostCSS în sine, este lista lungă de diverse plugin-uri care chiar o fac să strălucească. Când citiți lista pluginurilor disponibile pe pagina PostCSS GitHub, veți găsi o varietate de funcții care nu au fost niciodată conținute într-un spațiu înainte.
Există pluginuri pentru sintaxa viitoare, permițându-vă să utilizați funcții precum funcții de culoare, gradienți conic, proprietăți personalizate, selectori personalizați, aliasuri personalizate pentru interogări media și multe altele.
Există pluginuri de rezervă pentru a crea o sintaxă veche, cum ar fi adăugarea de rezervări hexazecimale pentru RGBA () culorile, adăugarea de filtre de opacitate pentru IE8, conversia selectorilor de elemente psuedo pentru IE8 și generarea px backbacks pentru rem Unități.
Sunt disponibile peste douăzeci de plugin-uri de extindere a limbajului, inclusiv adăugarea mixinelor, variabilelor, condiționărilor, pentru fiecare bucle, generarea de clase BEM și SUIT și câteva altele.
O selecție de plugin-uri de gestionare a culorilor este disponibilă, permițând conversia de la un format de culoare la altul, modificarea nivelelor alfa, combinarea culorilor, generarea de scheme de colorare prietenoase colorului, pentru a numi câteva.
Există sisteme de grilă, instrumente de optimizare, pluginuri care adaugă comenzi rapide și scurte, linter și alte pluginuri de analiză și raportare.
Nu este posibil să transmiți pe deplin diversitatea în continuă extindere a selecției pluginului curent în câteva paragrafe, așa că asigurați-vă că verificați lista pentru dvs..
Partea inversă a listei incredibile de pluginuri disponibile pentru PostCSS este că puteți utiliza cât mai multe sau mai puține dintre ele pe care le alegeți.
Doar doriți să utilizați PostCSS pentru a vă face CSS mai eficient și mai prietenos cu browserul încrucișat? Încărcați câteva pluginuri de optimizare și sunteți plecat.
Doriți să utilizați PostCSS exclusiv ca preprocesor? Utilizați în schimb câteva pluginuri de extensie a limbii și sunteți setați.
Filosofia de bază a PostCSS este modularitatea fină a cerealelor, prin care nu există pluginuri care să se ocupe de mai multe funcții. În schimb, un plugin este creat pe funcție și de acolo pot fi asamblate în pachete de plugin-uri cu funcționalitate obișnuită.
De exemplu, puteți selecta o selecție de pluginuri pentru extensiile de limbă și puteți crea propriul preprocesor personalizat. Sau, alternativ, puteți încărca pachetul PreCSS care vă va oferi automat accesul la mai multe pluginuri de extensie de limbă simultan.
Indiferent de modul în care doriți să utilizați PostCSS, puteți rula doar pluginurile de care aveți nevoie pentru scopurile dvs. specifice, ceea ce înseamnă că nu trebuie să trageți de-a lungul oricăror funcționalități neutilizate ca greutate.
Există două motive principale care testează PostCSS foarte rapid în repere. Una este faptul că trebuie să încărcați numai pluginurile de care aveți nevoie, așa cum este descris mai sus. Celălalt este că rulează pe JavaScript.
Puteți să executați aceste valori de referință pentru dvs. utilizând https://github.com/postcss/benchmark
Rezultatul unuia dintre aceste valori de referință, testul parsings, regulile imbricate, mixurile, variabilele și matematica, a fost:
PostCSS: 36 ms Rework: 77 ms (de 2 ori mai lent) libsass: 136 ms (de 3.8 ori mai lent) Mai puțin: 160 ms (de 4,4 ori mai lent) Stylus: 167 ms Sass: 1084 ms (30,1 ori mai lent)
Pluginurile pentru PostCSS sunt scrise în JavaScript și, ca atare, oricine poate scrie JavaScript poate crea un plugin pentru orice scop vrea. Pentru a vă oferi o idee, nu mă consider eu un dezvoltator JavaScript de bază, prin orice mijloace, dar după ce am descoperit PostCSS, am reușit să fac primul plugin complet funcțional în interval de câteva ore.
Proiectele de preprocesor precum Stylus, Sass și LESS fac o treabă minunată, dar nu pot fi totul pentru toată lumea. Ei trebuie să decidă ce caracteristici vor servi cel mai bine baza lor de utilizatori ca întreg. Dacă există funcționalitate pe care doriți să o aveți, puteți face o cerere de caracteristică, dar aceasta poate sau nu poate fi considerată ca fiind compatibilă cu nevoile mai largi ale proiectului.
Chiar dacă faceți o solicitare de funcții care este considerată potrivită, administratorii de proiecte sunt de obicei voluntari neplătiți, care nu au timp să-l dezvolte. Deci, dacă nu aveți nivelul de calificare pentru a crea acest lucru vă spuneți caracteristica, nu aveți noroc.
Cu PostCSS pe de altă parte, nu trebuie să întrebați pe nimeni. Dacă doriți o caracteristică nouă, puteți continua și creați-o. Din experiența mea, nivelul de experiență JavaScript necesar pentru a crea un plugin PostCSS ar putea fi gestionat pentru mulți dezvoltatori din segmentul front-end.
Într-un tutorial mai târziu din această serie vom trece prin crearea unui plugin PostCSS de bază. Chiar dacă nu vă considerați un expert JavaScript, cred că veți găsi crearea de plugin-uri PostCSS pentru a fi destul de realizabile.
O porțiune foarte mare a pluginurilor PostCSS nu necesită utilizarea unei sintaxe personalizate, așa cum este tipic cu preprocesoarele. Mai degrabă, ele pot fi aplicate la CSS regulate. Aceasta înseamnă că poți folosi PostCSS cu orice fișier CSS pe care-l găsești în posesie, cum ar fi foi de stil completate dintr-un cadru frontal, din proiectul altcuiva sau de exemplu un fișier Normalize.css.
De asemenea, înseamnă că nu sunteți blocat din proiectele care utilizează un preprocesor special, fie că este vorba de Stylus, Sass sau LESS, deoarece puteți aplica întotdeauna PostCSS în CSS compilat. De exemplu, dacă utilizați Fundația prin Sass, puteți rula pluginuri de optimizare și viitoare sintaxă după ce ați generat fișierele CSS ale proiectului.
De asemenea, începem să vedem întreaga bibliotecă construită cu PostCSS, unde în trecut s-ar putea să fi fost scrise în Stylus, Sass sau LESS.
De exemplu, Cory Simmons menține inițial atât versiunile Stylus, cât și Sass ale sistemului său de pierderi, astfel încât utilizatorii ambelor preprocesoare să poată avea acces. Ulterior, a transferat proiectul către PostCSS, ceea ce înseamnă că acum toată lumea poate folosi Lost, inclusiv utilizatorii Stylus și Sass, dar și utilizatorii mai puțini și persoanele care nu lucrează cu un preprocesor deloc.
Fiind bazat pe JavaScript, PostCSS nu necesită instalarea Ruby și are integrații gata pentru mai multe instrumente de dezvoltare.
Accentsconagua
@ regulile din CSSnpm install. Acest lucru facilitează partajarea ușoară a proiectelor PostCSS, în ciuda numărului foarte mare de variații posibile în configurarea pluginurilor.Vom trece prin modul în care puteți obține setarea pentru a utiliza PostCSS în următoarea secțiune "Ghid de pornire rapidă" din această serie.
Primul lucru pe care trebuie să-l cunoașteți este că PostCSS absoarbe rapid aburi și, din motive întemeiate, acum este momentul să ajungeți la construirea unei înțelegeri clare a modului în care aceasta vă poate ajuta procesele de dezvoltare.
În această serie vom începe să vă deplasăm prin modul în care puteți începe cu PostCSS prin intermediul tutorialelor:
De acolo vom examina cu atenție mai multe moduri variate în care puteți folosi PostCSS în tutoriale:
În cele din urmă, vom încheia prin a vă lua prin crearea plugin-ului de bază PostCSS.
Este posibil să observați o absență evidentă a unui tutorial privind utilizarea PostCSS pentru a permite viitorul CSS, mai ales dat fiind că mulți dintre ei văd cele două ca fiind aproape sinonime.
Motivul acestei absențe temporare este pluginul principal pentru viitorul CSS, cssnext, se pare că se va schimba în mod semnificativ pașii necesari pentru ao utiliza. Ca atare, vom fi atenți la aceasta și vă vom aduce un nou tutorial odată ce proiectul și-a făcut tranziția.
Deci, să începem! În următorul tutorial vom ajunge direct în "Ghidul nostru rapid" și vă vom arăta cele mai rapide căi de a începe folosind PostCSS. ne vedem acolo!
