CSS Post-Processors aloittelijoille Vinkkejä ja resursseja
CSS-esikäsittely on käsite, jonka useimmat web-kehittäjät ovat jo oppineet tai lukeneet. Olemme käsitelleet CSS-esikäsittelyä yksityiskohtaisesti, jotta kehittäjät voivat nopeuttaa tätä yleistä tekniikkaa. Entä post-prosessorit?
Nämä suhteellisen uudet työkalut ovat samankaltaisia siinä mielessä, että ne ovat vaikuttaa web-kehitystyöhön, ne toimivat kuitenkin CSS-kehityksen toinen puoli (“lähettää” kehittäminen).
Tässä viestissä haluan esitellä jälkikäsittelyn perusteet, miten se toimii, miksi käytät sitä ja jaa muutamia kirjastoja / työkaluja, joita voit käyttää CSS-pelisi kehittämiseen jälkikäsittelyllä.
Lähetä vs. esikäsittely
esikäsittelyn vallankumous tapahtui, kun Sass / LESS osui kohtaukseen. Nämä työkalut mahdollistavat kehittäjien käyttää muuttujia, silmukoita, toimintoja ja sekoittimia CSS: n sisällä. Tämä tekee lähes perustavanlaatuisen CSS-kehityksen samanlainen kuin ohjelmointikieli laajennettu toiminnallisuus.
Jälkikäsittelyä tapahtuu sen jälkeen, kun olet jo tuottanut tavallisen CSS: n ja haluat laajentaa sitä edelleen automatisoinnin kautta. Tähän voi sisältyä luokkavalitsimet, tai automaattisesti liittävät etuliitteet tiettyjen CSS-ominaisuuksien osalta.
Yleisesti ottaen esikäsittelyllä on oma omia tyylisivujen kieliä, kuten Sass ja LESS muuntaa puhtaaksi CSS: ksi. Jälkikäsittely vie kyseisen CSS: n ja soveltaa automaatiota / toistoa.
Tässä on tarjous postista, joka on myös edellä olevan kuvan lähde. Luulen, että kirjoittaja Stefan Baumgartner summaa eron upeasti.
Kumpikin näistä tuntuu automaatiotyökaluilta, jotka toimivat vain eri tavoin. Esimerkiksi jälkikäsittelyllä ratkaistu tavallinen kipu on automaattiset lisäykset etukäteen uusille CSS3-ominaisuuksille.
Mutta tämä voidaan tehdä myös Sassissa laajennuksilla. Joten on todella eroa? Tässä on toinen suuri tarjous samasta viestistä:
Vaikka tämä voi olla totta teoreettisessa mielessä, web-kehitysyhteisö luo edelleen eron näiden työkalujen välille. Tästä syystä suosittelen, että kehittäjät kehittäisivät ainakin luettelemaan postprosessoreista ja tietämään, mitä he voivat tehdä.
Sovita jälkikäsittely työnkulkuun
Lähes kaikki viittaukset PostCSS lopullisena resurssina jälkikäsittelyyn. PostCSS-tiimi on kuitenkin avoimesti myöntänyt Twitteriin heidän nimensä muuttaminen koska verbiage ei enää ole järkevää.
PostCSS ei ole enää vain CSS- tai post-CSS-työkalu. Se voi todella työtä molemmilla alueilla! Tämä selittää myös aikaisemman lainauksen, jossa todetaan, että kaikki CSS-työkalut kiehuvat yhteen - käsittely.
PostCSS käyttää JavaScript-laajennuksia automatisoi CSS-työnkulku, ja voit jopa kirjoittaa oman JS-laajennuksen laajentaaksesi PostCSS-kirjastoa. Jos haluat aloittaa PostCSS: n kanssa, tutustu Smashing Magazinen intro-opetusohjelmaan. Jos käytät ja ymmärrät jo Sassia, poistat Post CSS: n nopeasti.
Jos haluat rakentaa oman CSS-käsittelyn ennen tai jälkeen, aloita tehdä luettelo kipu pistettä, kuten:
- CSS-gradienttien automaattinen etuliite
- CSS-sääntöjen automaattinen organisointi
- polyfillien lisääminen tiettyihin ominaisuuksiin
- kuvien mittojen luominen taustakuville
Huomaa, että kaikki nämä asiat voidaan tehdä sekä ennen käsittelyä että jälkikäsittelyssä. On tärkeää ymmärtää, että CSS: n esikäsittely / jälkikäsittely on sulautumassa nopeasti yksi samassa asiassa.
Sen sijaan, että tavoitteet jaetaan eri käsittelyvaiheisiin, on parempi luetella ne tavoitteiksi, jatka sitten a etsi oikeat työkalut.
Paras jälkikäsittelyväline
Olen yrittänyt välttää mainitsemasta laajennuksia tässä osassa, koska Sass & PostCSS: llä on niin paljon valittavia asioita. Oikeasti voisit vain kirjastojen kanssa, mutta haluan myös tarjota joitakin vaihtoehtoisia ratkaisuja.
Pleeease
Jos olet jo työskennellyt Node.js: n kanssa, Pleeease näyttää olevan selvä valinta. Siinä on monia tyypillisiä CSS-käsittelyominaisuuksia, kuten tuodaan tiedostoja, muuttujia / toimintoja, automaattinen minimointi ja varmuuskopiointi uudemmille elementeille, kuten SVG: ille.
Sivustolla on myös interaktiivinen leikkipaikka kaikille, jotka haluavat kokeilla kirjastoa verkossa lataamatta kopiota paikallisesti.
Siunata
Muistan, kun Internet Explorer 6 oli edelleen haittaa, ja on mukavaa tietää, että IE: n kehitys on parantunut - mutta ei paljon. Vaikka haluaisin kertoa, että IE-käyttö on periaatteessa poissa, tämä ei näytä olevan totta.
Onneksi Bless CSS on ratkaisu havaitsee mahdolliset IE-ongelmat ja luo ratkaisuja jälkikäsittelyllä. Se toimii Node.js: lla, joten se sopii hyvin tyypilliseen NPM / Gulp-työnkulkuun.
CSSNext
Tässä on todella viileä kirjasto, jonka avulla voit rakentaa CSS: ää kehittyneempien toimintojen avulla jota ei tällä hetkellä tueta. CSSNext-kirjasto sisältää tuki parittomille CSS4-toiminnoille, kuten harmaa(), jotka ovat tällä hetkellä vain W3C-luonnoksissa.
En usko, että jokainen kehittäjä tarvitsee tätä kirjastoa. Se on hyvin erityinen, eikä se ratkaise päivittäisiä ongelmia, mutta se voi antaa sinulle a maku tulevista CSS4-specs samalla kun syntaksi muunnetaan nykyaikaiseksi CSS3: ksi.
Stylecow
Jos selaimen tuki on ongelma sinulle, sitten Stylecow on välttämätön. Tämän tehokkaan kirjaston avulla voit kehittää CSS: ää vain suosikkiselaimellesi. Sitten voit suorittaa komentorivityökalun Node-toiminnon kautta ja CSS on päivitetty kaikille selaimille, joita haluat tukea.
Voit ladata Stylecowin GitHubista, ja siinä on joitakin uskomattoman yksityiskohtaisia asiakirjoja.
-etuliite-ilmaiseksi
Lopuksi haluan jakaa -etuliite-ilmaiseksi kirjasto, joka on myös rakastettu työkalu CSS-kehitykselle, sillä se mahdollistaa käytä korjaamattomia CSS-ominaisuuksia. Kaikki haluavat käyttää moderneja CSS-ominaisuuksia, kuten animaatioita ja kaltevuuksia, mutta kukaan ei halua kopioida / liittää verbose-koodia manuaalisesti.
Tämän laajennuksen avulla sinun ei tarvitse edes ajaa CSS: ääsi tietokoneesi jälkiprosessorin kautta. Se voi toimia myös selaimena, joka sisältää käyttäjän tietokoneessa olevan päivittää automaattisesti CSS-tiedostot.
Autoprefixer, joka on osa PostCSS-kirjastoa, on luultavasti parempi valinta paikallinen jälkikäsittely. Siksi sanoin aiemmin, että jos käytät joko LESSiä tai Sassia PostCSS: n kanssa, niin sinulla on kaikki mitä tarvitset vaikuttavaan CSS-kehitystyöhön.
Käärimistä
Jälkikäsittely on enemmän kuin todellinen tekniikka, vaikka sillä on paikkansa CSS-työnkulussa nämä työkalut ovat parantaneet dramaattisesti koko modernin CSS: n kirjoittamisen prosessia. Voin vain suositella, että kehittäjät kaivavat syvemmälle löytääksesi mitä heille parhaiten sopii.
Jos etsit entistä enemmän tietoa jälkikäsittelystä, tutustu näihin liittyviin artikkeleihin:
- Mikä pelastaa meidät CSS-esiprosessorien pimeältä puolelta?
- Tulevaisuuden CSS: n kirjoittaminen PostCSS: n ja cssnextin kanssa
- CSS-esikäsittely (SASS tai LESS) vs. CSS-jälkikäsittely
