CSS post-procesorji za začetnike Nasveti in viri
Predobdelava CSS je koncept, o katerem se je večina spletnih razvijalcev že naučila ali brala. Zelo podrobno smo obdelali predprocesiranje CSS-ja, da bi razvijalcem pomagali doseči hitrejšo uporabo te prevladujoče tehnologije. Kaj pa? predelovalci?
Ta relativno nova orodja so podobna v smislu, da vplivajo na potek spletnega razvoja, vendar delujejo na drugi strani razvoja CSS (“post” razvoj).
V tej objavi bi rada uvedla osnove naknadne obdelave, kako deluje, zakaj bi jo uporabili in delili nekaj knjižnic / orodij, ki jih lahko uporabite za dvig CSS igre s naknadno obdelavo.
Post nasproti predobdelavi
The revolucija pred obdelavo se je zgodilo, ko Sass / LESS je prizadela sceno. Ta orodja omogočajo razvijalcem uporabo spremenljivk, zank, funkcij in kombinacij znotraj CSS. To skorajda omogoča osnovni razvoj CSS programski jezik z razširjeno funkcionalnostjo.
Naknadna obdelava se zgodi, ko ste že izdelali navaden CSS in želite podaljšati z avtomatizacijo. To lahko vključuje razširitev razredov selektorjev, ali samodejne dodane predpone za nekatere lastnosti CSS.
Na splošno ima predobdelava svojo lastnih jezikov za sloge, kot so Sass in LESS, to pretvorite v čisti CSS. Za naknadno obdelavo je potreben osnovni CSS in uporablja avtomatizacijo / ponavljanje.
Tukaj je citat iz objave, ki je tudi vir slike zgoraj. Mislim, da je avtor Stefan Baumgartner vsota razlike briljantno.
Na nek način se zdita oba orodja za avtomatizacijo, ki delata na različne načine. Na primer, skupna bolečina, ki je bila rešena z naknadno obdelavo, je samodejno dodajo predpone za novejše lastnosti CSS3.
Toda to lahko storimo tudi v Sassu z razširitvami. Torej je res razlika? Tukaj je še en velik citat iz iste objave:
Čeprav je to lahko res v teoretičnem smislu, spletna razvojna skupnost še vedno ustvarja razkorak med temi orodji. Zato priporočam, da razvijalcem posredujete vsaj informacije o post-procesorjih in da vedo, kaj lahko storijo.
Namestite naknadno obdelavo v delovni tok
Skoraj vsakdo se sklicuje PostCSS kot dokončni vir za naknadno obdelavo. Vendar pa je ekipa PostCSS odkrito priznala na Twitterju spremeni naslov ker besednjakov ni več smiselna.
PostCSS ni več le pred-CSS ali post-CSS orodje. Lahko dejansko delo na obeh področjih! To nadalje pojasnjuje citat iz prejšnje navedbe, da se vsa orodja CSS zlijejo na eno stvar - obravnavati.
PostCSS uporablja JavaScript vtičnike avtomatizirajte potek dela CSS, lahko celo napišete svoj JS plugin, da razširite knjižnico PostCSS. Če želite začeti z PostCSS, si oglejte to uvodno predstavitev o Smashing Magazine. Če že uporabljate in razumete Sass, boste hitro objavili CSS.
Če želite zgraditi svoj delovni tok za obdelavo pred / po CSS, začnite z seznam vaših bolečinskih točk, kot naprimer:
- samodejno določanje CSS gradientov
- samodejna organizacija za pravila CSS
- dodajanje polipilk za določene lastnosti
- ustvarjanje dimenzij slike za slike ozadja
Upoštevajte, da je vse to mogoče storiti tako pred in po obdelavi. Pomembno je vedeti, da se CSS pre / post obdelava hitro združuje in postane eno v isti stvari.
Namesto da si cilje razčlenite v različne faze obdelave, je bolje navedite kot cilje, nato nadaljujte z a poiščite ustrezna orodja.
Najboljša orodja za naknadno obdelavo
Poskušal sem se izogniti omenjanju razširitev v tem razdelku, saj imajo Sass & PostCSS toliko stvari, ki jih lahko izbirate. Resnično bi lahko samo s tistimi knjižnicami, ampak tudi nekaj želim ponuditi alternativ za bolj specifične rešitve.
Prosim
Če že delate z Node.js, potem je videti, da je Pleeease očitna izbira. Ima veliko značilne funkcije obdelave CSS, kot so uvoz datotek, spremenljivk / funkcij, samodejno zmanjševanje in nadomestna podpora za novejše elemente, kot so SVG.
Spletna stran ima tudi interaktivno igrišče za vse, ki želijo preizkusiti knjižnico na spletu, ne da bi lokalno prenesli kopijo.
Blagoslovi
Spomnim se, ko je bil Internet Explorer 6 še vedno neprijeten in lepo je vedeti, da se je razvoj IE izboljšal, vendar ne veliko. Čeprav bi vam rad povedal, da je uporaba IE v bistvu izginila, se to preprosto ne zdi res.
K sreči je Bless CSS rešitev odkrije morebitne težave, povezane z IE v vašem CSS-ju in ustvarja rešitve s naknadno obdelavo. Deluje na Node.js, tako da se dobro ujema s tipičnim delovnim procesom NPM / Gulp.
CSSNext
Tukaj je res kul knjižnica, ki vam omogoča zgradite CSS z bolj naprednimi funkcijami ki trenutno ni podprta. Knjižnica CSSNext vključuje podpora za čudne CSS4 funkcije, kot naprimer siva(), ki so trenutno prisotni le v osnutkih W3C.
Mislim, da vsak razvijalec ne bo potreboval te knjižnice. To je zelo specifično in ne bo rešilo vsakodnevnih težav, vendar vam lahko to da okus prihajajočih specifikacij CSS4 medtem ko sintakso pretvorimo v moderno CSS3.
Stylecow
Če brskalnika je vprašanje za vas, potem je Stylecow nujnost. Ta zmogljiva knjižnica vam omogoča razvoj CSS samo za vaš najljubši brskalnik. Potem lahko orodje ukazne vrstice zaženete prek Node in vaš CSS bo posodobljen za vse brskalnike, ki jih želite podpirati.
Lahko prenesete Stylecow od GitHub, in to prihaja z nekaj neverjetno podrobno dokumentacijo.
-brez predpone
Nazadnje želim deliti -brez predpone knjižnica, ki je tudi priljubljeno orodje za razvoj CSS, kot vam omogoča uporabite lastnosti CSS, ki niso predpriprave. Vsakdo želi uporabljati sodobne lastnosti CSS, kot so animacije in prelivi, vendar nihče ne želi ročno kopirati / prilepiti podrobne kode.
S tem vtičnikom vam celo ni treba zagnati CSS-ja prek postprocesorja v računalniku. Lahko deluje tudi kot brskalnik, ki se izvaja na uporabnikovem računalniku samodejno posodobi datoteke CSS.
Autoprefixer, ki je del knjižnice PostCSS, je verjetno celo boljša izbira lokalno naknadno obdelavo. Zato sem prej rekel, da če uporabljate LESS ali Sass skupaj s PostCSS, boste imeli vse, kar potrebujete za impresiven potek dela CSS..
Zavijanje
Naknadna obdelava je bolj navadna fraza kot prava tehnologija, čeprav ima svoje mesto v delovnem procesu CSS, kot je s temi orodji se je dramatično povečal celoten proces pisanja modernega CSS-ja. Jaz lahko samo priporočam, da razvijalci kopati globlje, da bi našli tisto, kar najbolje deluje za njih.
Če iščete več informacij o naknadni obdelavi, si oglejte te sorodne članke:
- Kaj nas bo rešilo od temne strani predprocesorjev CSS?
- Pogled v pisanje prihodnjih CSS s PostCSS in cssnext
- Predprocesiranje CSS (SASS ali LESS) proti CSS Postprocesiranje
