CSS Post-Processors iesācējiem Padomi un resursi

CSS priekšapstrāde ir jēdziens, ka vairums tīmekļa izstrādātāju jau ir iemācījušies vai lasījuši. CSS priekšapstrāde ir ļoti detalizēta, lai palīdzētu izstrādātājiem izmantot šo izplatīto tehnoloģiju. Bet ko par pēcapstrādātāji?

Šie salīdzinoši jaunie instrumenti ir līdzīgi tādā nozīmē, ka tie ir ietekmē tīmekļa izstrādes darbplūsmu, tomēr viņi darbojas CSS izstrādes otrā puse (“post” attīstība).

Šajā ziņojumā es vēlos iepazīstināt ar pēcapstrādes pamati, kā tas darbojas, kāpēc jūs to lietojat, un koplietojiet dažas bibliotēkas / rīkus, ko varat izmantot, lai izveidotu savu CSS spēli ar pēcapstrādi.

Ziņošana pret priekšapstrādi

The pirmapstrādes revolūcija notika, kad Sass / LESS skāra ainu. Šie rīki ļauj izstrādātājiem izmantot CSS mainīgos, cilpas, funkcijas un miksus. Tas gandrīz padara CSS pamata attīstību līdzīga programmēšanas valodai ar paplašinātu funkcionalitāti.

Pēcapstrāde notiek pēc tam, kad jau esat izveidojis vienkāršo CSS un vēlaties paplašināt izmantojot automatizāciju. Tas var ietvert klases selektoru paplašināšana, vai Automātiski pievienojamie prefiksti noteiktām CSS īpašībām.

Vispārīgi runājot, iepriekšējai apstrādei ir sava savas stilu lapas, piemēram, Sass un LESS pārvērst tīrā CSS. Pēcapstrāde veic šo pamata CSS un piemēro automatizāciju / atkārtošanu.

Šeit ir citāts no amata, kas ir arī attēla avots. Es domāju, ka autors Stefan Baumgartner summē atšķirību lieliski.

Savā ziņā abi šie šķiet kā automatizācijas rīki, kas darbojas tikai dažādos veidos. Piemēram, kopīga sāpes, kas atrisinātas pēcapstrādes procesā, ir Automātiski pievienojiet prefiksus jaunākām CSS3 īpašībām.

Bet to var izdarīt arī Sassā ar paplašinājumiem. Tātad ir tiešām atšķirība? Šeit ir vēl viens lielisks citāts no tā paša amata:

Lai gan tas teorētiski var būt taisnība, tīmekļa izstrādes kopiena joprojām rada atšķirību starp šiem rīkiem. Šī iemesla dēļ es ļoti ieteiktu, lai izstrādātāji varētu lasīt vismaz par postprocesoriem un uzzināt, ko viņi var darīt.

Ievietojiet pēcapstrādi savā darbplūsmā

Gandrīz ikviens atsaucas PostCSS kā galīgo resursu pēcapstrādei. Tomēr PostCSS komanda ir atklāti atzinusi par čivināt mainot to nosaukumu jo verbija vairs nav jēga.

PostCSS vairs nav tikai pirms-CSS vai pēc CSS rīks. Tas var faktiski strādā abās jomās! Tas vēl vairāk izskaidro iepriekšējo citātu, kurā teikts, ka visi CSS rīki ir vērsti uz vienu lietu - apstrādi.

PostCSS izmanto JavaScript spraudņus automatizējiet savu CSS darbplūsmu, un jūs pat varat rakstīt savu JS spraudni, lai paplašinātu PostCSS bibliotēku. Ja vēlaties sākt darbu ar PostCSS, pārbaudiet šo intro pamācību par Smashing Magazine. Ja jūs jau lietojat un sapratīsiet Sass, jūs ātri saņemsiet Post CSS.

Lai izveidotu savu pirms un pēc CSS apstrādes darbplūsmu, sāciet ar sarakstu ar jūsu sāpju punktiem, piemēram:

• CSS gradientu automātiska pievienošana
• CSS noteikumu automātiska organizēšana
• polifilu pievienošana noteiktiem īpašumiem
• attēla izmēru ģenerēšana fona attēliem

Ņemiet vērā, ka visas šīs lietas var izdarīt gan pirms, gan pēc apstrādes. Ir svarīgi saprast, ka CSS pirms un pēc apstrādes ātri apvienojas viens vienā.

Tā vietā, lai sadalītu savus mērķus dažādos apstrādes posmos, tas ir labāk uzskaitīt tos kā mērķus, tad turpiniet a meklēt pareizos rīkus.

Labākie pēcapstrādes rīki

Es esmu mēģinājis izvairīties no paplašinājumu pieminēšanas šajā sadaļā, jo Sass & PostCSS ir tik daudz ko izvēlēties. Godīgi jūs varētu iegūt tikai ar šīm bibliotēkām, bet es arī gribu piedāvāt dažus alternatīvas specifiskākiem risinājumiem.

Pleeease

Ja jūs jau strādājat ar Node.js, tad Pleeease šķiet acīmredzama izvēle. Tam ir daudz tipiskas CSS apstrādes funkcijas, piemēram, failu importēšana, mainīgie / funkcijas, automātiskā samazināšana un rezerves atbalsts jaunākiem elementiem, piemēram, SVG.

Mājas lapā ir arī interaktīvs rotaļu laukums ikvienam, kurš vēlas izmēģināt bibliotēku tiešsaistē, neierakstot kopiju lokāli.

Svēt

Es atceros, kad Internet Explorer 6 joprojām bija traucējošs, un ir patīkami zināt, ka IE attīstība ir uzlabojusies, bet ne daudz. Lai gan es gribētu jums pastāstīt, ka IE lietojums ir būtībā pagājis, tas vienkārši nešķiet taisnība.

Par laimi, Bless CSS ir risinājums atklāj iespējamās ar IE saistītās problēmas jūsu CSS, un rada risinājumus ar pēcapstrādi. Tas darbojas uz Node.js, tāpēc tas labi iekļaujas tipiskā NPM / Gulp darbplūsmā.

CSSNākamais

Lūk, tiešām atdzist bibliotēka, kas ļauj jums veidot CSS ar modernākām funkcijām tas pašlaik netiek atbalstīts. CSSNext bibliotēka ietver atbalsts nepāra CSS4 funkcijām, piemēram, pelēks (), kas pašlaik ir tikai W3C projektos.

Es nedomāju, ka katram attīstītājam būs nepieciešama šī bibliotēka. Tas ir ļoti specifisks un neatrisinās ikdienas problēmas, tomēr tas var jums palīdzēt gaidāmo CSS4 specifikāciju garšu pārvēršot sintaksi līdz mūsdienu CSS3.

Stylecow

Ja pārlūka atbalsts ir jautājums jums, tad Stylecow ir nepieciešamība. Šī spēcīgā bibliotēka ļauj jums izveidot CSS tikai jūsu iecienītākajai pārlūkprogrammai. Pēc tam varat palaist komandrindas rīku, izmantojot Node, un jūsu CSS būs atjaunina visas pārlūkprogrammas, kuras vēlaties atbalstīt.

Jūs varat lejupielādēt Stylecow no GitHub, un tas nāk ar dažiem neticami detalizētiem dokumentiem.

-bez prefiksa

Visbeidzot es vēlos dalīties -bez prefiksa bibliotēka, kas ir arī iecienīts rīks CSS izstrādei, jo tas ļauj jums izmantot nepieredzētas CSS īpašības. Ikviens vēlas izmantot modernas CSS īpašības, piemēram, animācijas un gradientus, taču neviens nevēlas kopēt / ielīmēt verbose kodu manuāli.

Ar šo spraudni jums pat nav jādarbojas CSS caur sava datora pēcprocesoru. Tā var darboties arī kā pārlūks, kas ietver lietotāja datorā darbojošos automātiski atjaunina CSS failus.

Autoprefixer, kas ir daļa no PostCSS bibliotēkas, iespējams, ir labāka izvēle vietējā pēcapstrāde. Tāpēc es teicu, ka, ja jūs izmantojat LESS vai Sass kopā ar PostCSS, tad jums būs viss, kas nepieciešams iespaidīgai CSS izstrādes darbplūsmai.

Iesaiņošana

Pēcapstrāde ir vairāk nozvejas frāze nekā īsta tehnoloģija, lai gan tai ir vieta CSS darbplūsmā, kā tas ir šie instrumenti ir ievērojami uzlabojuši visu mūsdienu CSS rakstīšanas procesu. Es varu tikai ieteikt, lai izstrādātāji dziļāk atrastos, lai atrastu visu, kas viņiem vislabāk atbilst.

Ja meklējat vēl vairāk informācijas par pēcapstrādi, apmeklējiet šos saistītos rakstus:

• Kas mūs glābs no CSS priekšapstrādātāju tumšās puses?
• Izpētīt nākotnes CSS ar PostCSS un cssnext
• CSS pirmapstrāde (SASS vai LESS) vs CSS pēcapstrāde