CSS post-processors pradedantiesiems Patarimai ir ištekliai

CSS išankstinis apdorojimas yra koncepcija, kad dauguma žiniatinklio kūrėjų jau sužinojo ar skaito apie tai. Išsamiai aptarėme CSS išankstinį apdorojimą, kad kūrėjai galėtų greičiau pasinaudoti šia paplitusi technologija. Bet ką apie po perdirbėjų?

Šios palyginti naujos priemonės yra panašios, nes jos yra įtakos interneto kūrimo darbo eigai, tačiau jie veikia kitoje CSS kūrimo pusėje (“paštu” plėtra).

Šiame pranešime norėčiau pristatyti post-perdirbimo pagrindai, kaip jis veikia, kodėl jūs jį naudosite ir pasidalinkite keliomis bibliotekomis / įrankiais, kuriuos galite naudoti savo CSS žaidimui naudoti po apdorojimo.

Rašyti prieš išankstinį apdorojimą

The išankstinio apdorojimo revoliucija atsitiko, kai Sass / LESS nukentėjo scenoje. Šie įrankiai leidžia programuotojams CSS naudoti kintamuosius, kilpas, funkcijas ir mišinius. Tai beveik padaro pagrindinį CSS kūrimą panašus į programavimo kalbą su išplėstiniu funkcionalumu.

Po apdorojimo atsitinka, kai jau sukūrėte paprastą CSS ir norite pratęsti per automatizavimą. Tai gali apimti klasių selektoriai, arba automatiškai pridedami priešdėliai tam tikrų CSS savybių.

Apskritai, išankstinis apdorojimas turi savo savo stilių kalbos, tokie kaip Sass ir LESS konvertuoti į gryną CSS. Po apdorojimo trunka tą pagrindinį CSS, ir taiko automatizavimą / kartojimą.

Čia yra citata iš įrašo, kuris taip pat yra aukščiau esančio vaizdo šaltinis. Manau, kad autorius Stefan Baumgartner sumaišyti skirtumą iki puikiai.

Savo ruožtu abu šie būdai atrodo kaip automatizavimo įrankiai, kurie veikia tik skirtingais būdais. Pavyzdžiui, įprastas skausmas, išspręstas po apdorojimo, yra automatiškai pridėti prefiksus naujesnėms CSS3 savybėms.

Bet tai taip pat gali būti padaryta Sassas su plėtiniais. Taigi yra tikrai skirtumų? Štai dar viena didelė citata iš tos pačios žinutės:

Nors tai gali būti tiesa teoriškai, žiniatinklio kūrimo bendruomenė vis dar sukuria skirtumą tarp šių įrankių. Dėl šios priežasties norėčiau labai rekomenduoti, kad kūrėjai suprastų bent jau apie apdorotojus ir žinotų, ką jie gali padaryti.

Įtraukite apdorojimą į savo darbo eigą

Beveik visi nurodymai PostCSS kaip galutinį išteklių apdorojimo šaltinį. Tačiau „PostCSS“ komanda atvirai pripažino „Twitter“ keisti jų pavadinimą nes nebebus prasminga verbija.

„PostCSS“ nebėra tik „CSS“ arba „CSS“ įrankis. Jis iš tikrųjų gali dirbti abiejose srityse! Tai dar labiau paaiškina ankstesnę citatą, kuriame teigiama, kad visos CSS priemonės virsta vienu dalyku - apdorojimas.

„PostCSS“ naudoja „JavaScript“ papildinius automatizuokite savo CSS darbo eigą, ir netgi galite rašyti savo JS įskiepį, kad išplėstumėte „PostCSS“ biblioteką. Jei norite pradėti darbą su „PostCSS“, patikrinkite šį „Smashing Magazine“ intro vadovėlį. Jei jau naudojate ir suprantate „Sass“, greitai pasieksite „Post CSS“.

Norėdami sukurti savo pačių prieš ir po CSS apdorojimo darbo eigą, pradėkite nuo pateikti savo skausmo taškų sąrašą, toks kaip:

• CSS gradientų automatinis prefiksavimas
• CSS taisyklių automatinis organizavimas
• pridedant polifilų tam tikroms savybėms
• sukurti fono vaizdų matmenis

Atkreipkite dėmesį, kad visus šiuos dalykus galima padaryti tiek prieš, tiek po apdorojimo. Svarbu suprasti, kad CSS prieš ir po apdorojimo greitai susilieja vienas iš to paties dalyko.

Vietoj to, kad suskirstytumėte savo tikslus į skirtingus apdorojimo etapus, tai geriau išvardyti juos kaip tikslus, tada eikite į ieškoti tinkamų priemonių.

Geriausi antrinio apdorojimo įrankiai

Stengiausi vengti paminėti plėtinius šiame skyriuje, nes „Sass & PostCSS“ turi tiek daug ką pasirinkti. Sąžiningai galėtumėte gauti tik tas bibliotekas, bet aš taip pat noriu pasiūlyti kai kuriuos alternatyvų konkretiems sprendimams.

Pleeease

Jei jau dirbate su „Node.js“, tada Pleeease atrodo kaip akivaizdus pasirinkimas. Jis turi daug tipiškų CSS apdorojimo funkcijų, pvz., importuoti failus, kintamuosius / funkcijas, automatinį redagavimą ir atsarginę paramą naujiems elementams, pvz., SVG.

Svetainėje taip pat yra interaktyvi žaidimų aikštelė visiems, kurie nori išbandyti biblioteką internete, neperkeldami vietos kopijos.

Palaimink

Prisimenu, kai „Internet Explorer 6“ vis dar buvo nepatogus, ir malonu žinoti, kad IE plėtra pagerėjo, bet ne daug. Nors aš norėčiau jums pasakyti, IE naudojimas iš esmės yra dingo, tai tiesiog neatrodo tiesa.

Laimei, Bless CSS yra sprendimas, kad nustato galimas su IE susijusias problemas CSS sistemoje ir sukuria sprendimus po apdorojimo. Jis veikia „Node.js“, taigi jis puikiai dera į tipišką NPM / Gulp darbo eigą.

CSSNext

Čia yra tikrai kieta biblioteka, kuri leidžia jums sukurti pažangesnę CSS funkciją tai šiuo metu nepalaikoma. CSSNext biblioteka apima parama keistoms CSS4 funkcijoms, toks kaip pilka (), kurie šiuo metu yra tik W3C juodraščiuose.

Nemanau, kad kiekvienam kūrėjui reikės šios bibliotekos. Tai labai specifinė ir neišspręs kasdienių problemų, tačiau gali jums suteikti būsimų CSS4 specifikacijų skonis konvertuojant sintaksę į šiuolaikinę CSS3.

Stylecow

Jei naršyklės palaikymas yra problema jums, tada Stylecow yra būtinybė. Ši galinga biblioteka leidžia jums sukurti CSS tik jūsų mėgstamiausia naršyklė. Tada galite paleisti komandinės eilutės įrankį per „Node“ ir jūsų CSS bus atnaujinama visoms naršyklėms, kurias norite palaikyti.

„Stylecow“ galite atsisiųsti iš „GitHub“.

-be priedų

Galiausiai noriu pasidalinti -be priedų biblioteka, kuri taip pat yra mylima priemonė CSS kūrimui, nes tai leidžia jums naudoti nepakeistas CSS savybes. Kiekvienas nori naudoti šiuolaikines CSS savybes, pavyzdžiui, animacijas ir gradientus, bet niekas nenori kopijuoti / įklijuoti verbos kodo rankiniu būdu.

Su šiuo įskiepiu net nereikia paleisti CSS per savo kompiuterio postprocesorių. Jis taip pat gali veikti kaip naršyklė, kuri apima vartotojo kompiuterį automatiškai atnaujina CSS failus.

„Autoprefixer“, kuri yra „PostCSS“ bibliotekos dalis, tikriausiai yra geresnis pasirinkimas vietinis po apdorojimas. Štai kodėl anksčiau sakiau, kad jei naudosite LESS arba Sass kartu su „PostCSS“, tada turėsite viską, ko reikia įspūdingam CSS kūrimo procesui.

Apvyniojimas

Perdirbimas yra labiau sugavimo frazė nei tikra technologija, nors ji turi vietą CSS darbo eigoje, kaip visa šiuolaikinių CSS rašymo proceso eiga buvo žymiai sustiprinta. Galiu tik rekomenduoti, kad kūrėjai giliau ieškotų, kas jiems geriausiai tinka.

Jei ieškote dar daugiau informacijos apie apdorojimą, žiūrėkite šiuos susijusius straipsnius:

• Kas išgelbės mus iš „CSS“ išankstinių procesorių tamsos pusės?
• Pažvelkite į ateities CSS rašymą „PostCSS“ ir „cssnext“
• CSS išankstinis apdorojimas (SASS arba LESS) vs CSS postprocessing