Post-procesoare CSS pentru sfaturi și resurse pentru începători

Pre-procesare CSS este un concept pe care majoritatea dezvoltatorilor de pagini web le-au învățat deja sau le-au citit. Am acoperit preprocesarea CSS în detaliu pentru a ajuta dezvoltatorii să ajungă la viteză pe această tehnologie răspândită. Dar ce zici post-procesoare?

Aceste instrumente relativ noi sunt similare în sensul că acestea afectează fluxul de lucru pentru dezvoltarea web, cu toate acestea ei operează pe de altă parte a dezvoltării CSS (“post” dezvoltare).

În acest post, aș dori să introduc elementele de bază ale postprocesării, cum funcționează, de ce o folosești și de a împărtăși câteva biblioteci / instrumente pe care le poți folosi pentru a-ți dezvolta jocul CSS cu post-procesare.

Post-versus pre-procesare

pre-procesare revoluție sa întâmplat când Sass / LESS a lovit scena. Aceste instrumente permit dezvoltatorilor să utilizeze variabile, bucle, funcții și mixuri în CSS. Acest lucru face practic dezvoltarea CSS de bază similar cu un limbaj de programare cu funcționalitate extinsă.

Post procesare se întâmplă după ce ai produs deja CSS simplu și vrei să extindeți-l mai departe prin automatizare. Aceasta poate include extinderea selectorilor de clasă, sau prefixe automate pentru anumite proprietăți CSS.

În general, pre-procesarea are propriile sale propriile limbi de stil, cum ar fi Sass și LESS, asta convertiți în CSS pur. Procesarea ulterioară are ca bază CSS și aplică automatizarea / repetarea.

Iată un citat dintr-un mesaj care este, de asemenea, sursa imaginii de mai sus. Cred că autorul Stefan Baumgartner însumează diferența în mod strălucit.

Într-un fel, ambele apar ca niște instrumente de automatizare, care lucrează în moduri diferite. De exemplu, o durere comună rezolvată prin post-procesare este de a adăugați prefixele automate pentru proprietățile CSS3 mai noi.

Dar acest lucru se poate face și în Sass cu extensii. Deci există într-adevăr o diferență? Iată un alt citat grozav din același post:

În timp ce acest lucru poate fi adevărat într-un sens teoretic, comunitatea de dezvoltare web creează încă o diviziune între aceste instrumente. Din acest motiv, aș recomanda în mod deosebit dezvoltatorilor de frontend să citească cel puțin despre postprocesoare și să știe ce pot face.

Fit post-procesare în fluxul de lucru

Aproape toată lumea face referințe PostCSS ca resursă definitivă pentru post-procesare. Cu toate acestea, echipa PostCSS a admis deschis pe Twitter la schimbându-și titlul deoarece verbiajul nu mai are sens.

PostCSS nu mai este doar un instrument pre-CSS sau post-CSS. Se poate de fapt lucrează în ambele domenii! Acest lucru explică în continuare citatul de mai înainte, care afirmă că toate instrumentele CSS se aruncă la un singur lucru - prelucrare.

PostCSS utilizează pluginurile JavaScript automatizați fluxul de lucru CSS, și puteți chiar să vă scrieți propriul plugin JS pentru a extinde biblioteca PostCSS. Dacă doriți să începeți cu PostCSS, verificați acest intro tutorial pe Smashing Magazine. Dacă deja utilizați și înțelegeți Sass, atunci veți prelua Post CSS rapid.

Pentru a vă construi propriul flux de lucru de procesare înainte / după CSS, începeți cu făcând o listă a punctelor de durere, precum:

• prefixarea automată a gradientelor CSS
• organizarea automată a regulilor CSS
• adăugarea de polifluze pentru anumite proprietăți
• generând dimensiuni de imagine pentru imaginile de fundal

Rețineți că toate aceste lucruri se pot face în pre- și post-procesare. Este important să realizăm că procesarea pre / post CSS devine rapidă pentru a deveni unul în același lucru.

În loc să vă descompuneți obiectivele în diferite etape de procesare, este mai bine să le faceți să le precizeze ca obiective, apoi mergeți pe căutați instrumentele potrivite.

Cele mai bune instrumente de postprocesare

Am încercat să evit să menționez extensiile din această secțiune, deoarece Sass & PostCSS au atât de multe lucruri de ales. Sincer ai putut treci cu doar acele biblioteci, dar vreau să ofer și altele alternative pentru soluții mai specifice.

Pleeease

Dacă lucrați deja cu Node.js, atunci Pleeease pare o alegere evidentă. Are multe caracteristicile tipice de procesare CSS, cum ar fi importarea fișierelor, variabile / funcții, auto-minificare și suport pentru noi elemente mai noi, cum ar fi SVG-urile.

Site-ul are, de asemenea, un teren de joacă interactiv pentru oricine dorește să încerce online biblioteca fără a descărca o copie la nivel local.

Binecuvânta

Îmi amintesc când Internet Explorer 6 era încă o provocare, și este bine să știți că dezvoltarea IE sa îmbunătățit - dar nu mult. În timp ce mi-ar plăcea să vă spun că utilizarea IE este practic plecată, acest lucru nu pare a fi adevărat.

Din fericire, Bless CSS este o soluție care detectează potențialele probleme legate de IE în CSS și creează soluții cu postprocesare. Rulează pe Node.js, așa că se potrivește bine cu fluxul tipic de lucru NPM / Gulp.

CSSNext

Iată o bibliotecă foarte cool care vă permite să construi CSS cu funcționalități mai avansate care nu este acceptată în prezent. Biblioteca CSSNext include suport pentru funcții ciudate CSS4, precum gri(), care sunt în prezent prezente doar în schițele W3C.

Nu cred că fiecare dezvoltator va avea nevoie de această bibliotecă. Este foarte specifică și nu va rezolva problemele de zi cu zi, dar vă poate da gustul viitoarelor specificații CSS4 în timp ce convertiți sintaxa până la CSS3 modernă.

Stylecow

Dacă suport pentru browser este o problemă pentru dvs., atunci Stylecow este o necesitate. Această bibliotecă puternică vă permite să dezvoltați CSS doar pentru browserul dvs. preferat. Apoi, puteți rula instrumentul de linie de comandă prin Nod, iar CSS va fi actualizat pentru toate browserele pe care doriți să le sprijiniți.

Puteți descărca Stylecow de la GitHub, și vine cu o documentație incredibil de detaliată.

-prefix-free

În cele din urmă vreau să împărtășesc -prefix-free bibliotecă care este, de asemenea, un instrument iubit pentru dezvoltarea CSS, așa cum vă permite utilizați proprietăți CSS fără prefix. Toată lumea dorește să utilizeze proprietăți CSS moderne, cum ar fi animațiile și gradientele, dar nimeni nu dorește să copieze / să lipsească manual codul verbose.

Cu acest plugin, nici măcar nu trebuie să rulați CSS-ul dvs. prin intermediul unui postprocesor de pe computer. Acesta poate funcționa, de asemenea, ca un browser include, care rulează pe computerul utilizatorului la actualizați automat fișierele CSS.

Autoprefixer, care face parte din biblioteca PostCSS, este probabil o alegere mai bună post-procesare locală. De aceea am spus mai devreme că dacă folosiți fie LESS sau SASS împreună cu PostCSS, atunci veți avea tot ce aveți nevoie pentru un flux de lucru impresionant de dezvoltare CSS.

Înfășurarea în sus

Post-procesarea este mai mult o frază de captură decât o tehnologie reală, deși are loc în fluxul de lucru CSS, ca întregul proces de scriere a CSS modern a fost îmbunătățit dramatic de aceste instrumente. Pot doar să recomand că dezvoltatorii sapă mai adânc pentru a găsi ceea ce este mai bine pentru ei.

Dacă sunteți în căutarea pentru mai multe informații despre post-procesare, aruncați o privire la aceste articole înrudite:

• Ce ne va salva din partea întunecată a procesoarelor CSS?
• O privire în scrierea viitorului CSS cu PostCSS și cssnext
• Pre-procesare CSS (SASS sau LESS) versus postprocesare CSS