Share
Hvis det er en ting du virkelig trenger å vite om PostCSS, er det det Du bør lære hva det er og hvordan du bruker det så fort som mulig.
I denne serien skal vi ta et dypt dykk inn i PostCSS og ta deg gjennom alle de store måtene du kan bruke den. Hvis du ikke allerede har tankene dine blåses av hva PostCSS er i stand til, gjør deg klar for en modig, ny CSS-verden.
PostCSS har vokst i popularitet ved breakneck-fart. Flere og flere mennesker begynner å forstå hva det tilbyr, nyter det "lyspære øyeblikk" når de innser hvordan de kan bruke det unikt i sine egne prosjekter.
I 2014 var det litt under 1,4 millioner nedlastinger totalt for året, men fra januar til juni i 2015 hadde det allerede vært over 3,8 millioner nedlastinger.
Autoprefixer, et svært populært PostCSS-plugin, brukes av Google, Shopify, Twitter, Bootstrap og CodePen. WordPress bruker også Autoprefixer, samt RTLCSS-plugin. Og Alibaba bruker flere PostCSS-plugins, samt utvikler sine egne og bidrar til andre pluginprosjekter.
Utover det har Mark Otto snakket om Bootstrap versjon 5 som er skrevet i PostCSS:
Å, btw-Bootstrap 4 vil være i SCSS. Og hvis du bryr deg, vil v5 sannsynligvis være i PostCSS fordi hellig crap som høres kult ut.
- Mark Otto (@mdo) 23. april 2015
PostCSS har nettopp blitt integrert i CodePen.io og kan brukes inline ved å velge det i CSS-innstillingene:
PostCSS på CodePenPostCSS vokser, det vokser raskt, og med god grunn.
Så hva er PostCSS? Den beste definisjonen kommer fra prosjektets egen GitHub-side:
"PostCSS er et verktøy for å transformere CSS med JS plugins. Disse pluginene kan støtte variabler og mixins, transpilere fremtidige CSS-syntaks, inlinebilder og mer.
I et nøtteskall tar PostCSS CSS og gjør det til en form for data som JavaScript kan manipulere. JavaScript-baserte plugins for PostCSS, og utfør så koden manipulasjonene. PostCSS i seg selv endrer ikke CSS, det baner bare vei for plugins for å utføre hvilke transformasjoner de har blitt designet for å lage.
Det er i hovedsak ingen begrensninger på hva slags manipulering PostCSS-plugins kan gjelde for CSS. Hvis du kan tenke på det, kan du sannsynligvis skrive et PostCSS-plugin for å få det til å skje.
PostCSS-plugins kan oppføre seg som preprosessorer; de kan optimalisere og autoprefix-kode, de kan legge til fremtidig syntaks, de kan utføre linting, de kan behandle variabler og logikk, de kan tilby komplette nettverkssystemer, de kan tilby kodende snarveier ... listen er lang og variert.
Det faktum at du kan gjøre omtrent alt du vil ha med PostCSS-plugins, kombinert med at PostCSS fortsatt er relativt nytt, har ført til noen misforståelser om hva verktøyet egentlig er.
Mange mennesker, (selv inkludert, i utgangspunktet), har hatt et ufullstendig inntrykk av hva PostCSS egentlig er, og har derfor enten savnet hva PostCSS har å tilby, eller kommet sent til bordet.
Så før vi går videre, la oss rydde opp noen av tingene PostCSS er ikke.
Mange utviklere har sagt at de forlater CSS preprocessors til fordel for PostCSS. I mellomtiden står andre at fordi de foretrekker sin nåværende preprosessor, liker de ikke PostCSS. Men PostCSS er ikke en forprosessor.
Ja, du kan absolutt bruke det som en forprosessor hvis du ønsker det, men du kan også bruke PostCSS med absolutt ingen preprosessor-lignende funksjonalitet. Du kan til og med fortsette å bruke din favoritt preprosessor i sammenheng med PostCSS.
PostCSS har ordet "post" i navnet, men det er heller ikke en "postprosessor". Etterbehandling blir vanligvis sett på som å ta et ferdig stilark som inneholder gyldig / standard CSS-syntaks og behandler den, for å gjøre ting som å legge til leverandørprefikser. Men PostCSS er ikke begrenset til drift utelukkende på denne måten. Som nevnt ovenfor kan den oppføre seg som en forprosessor også.
Det er kanskje best å bare tenke på PostCSS som en "prosessor". Som Andrey Sitnik, PostCSSs skaperen, sa på Twitter:
Det er på tide å innrømme mine feil. "Etterprosessor" var dårlig. PostCSS-teamet stoppet for å bruke det. https://t.co/vs2AiXGoJy
- PostCSS (@PostCSS) 28. juli 2015
Og som en fremtredende PostCSS-bidragsyter og plugin-utvikler Maxime Thirouin beskrevet på Twitter, i stedet for "innlegget" i PostCSS om "post" -behandling, kan det bedre betraktes som "CSS og utover".
@HugoGiraudel ingen i postcss-bidragsytere bruker dette uttrykket lenger. Nå er det Postcss som "css og beyond"
- Maxime Thirouin (@MoOx) 21. juli 2015
Det er noen gode og meget kjente PostCSS-plugins som lar deg skrive i fremtidig syntaks, det vil si å bruke CSS som vil være tilgjengelig i fremtiden, men det er fortsatt ikke mye støttet. Men PostCSS er ikke iboende om å støtte fremtidig syntaks.
Noen utviklere har uttrykt motvilje mot å bruke PostCSS, sier det er fordi de ikke er sikre på at de er komfortable med å skrive fremtidig syntaks. Men å skrive fremtidig syntaks er bare en av mange måter du kan bruke PostCSS.
Hvis du velger det, kan du bruke PostCSS til å fullstendig revolusjonere utviklingsprosessene uten en linje med fremtidig syntax i sikte.
Suksessen til Autoprefixer-pluginet har ført til den vanlige oppfatningen av PostCSS som noe du kjører på ditt ferdige CSS, for å rydde det opp og optimalisere det for hastighet og kryssleser-kompatibilitet. Dette er oppfatningen jeg hadde selv, til jeg lærte om det store utvalg av andre ting du kan oppnå med PostCSS.
Ja, det er mange fantastiske plugins som tilbyr flotte opprydding og optimaliseringsprosesser, men disse er bare en brøkdel av det som tilbys.
Den mest overbevisende tingen om PostCSS er at den ikke er begrenset til noen form for funksjonalitet; Det representerer et helt tilpassbart og konfigurerbart sett med funksjonalitet som er potensielt ubegrenset.
Vurder WordPress-plugins som en parallell. E-handelstillegg er veldig populære, men ingen anser WordPress seg selv som en e-handelsmotor, og fordelene ved WordPress blir ikke vurdert basert på e-handelsplugger.
I tilfelle av PostCSS, liker jeg å tenke på det som å være som brødet du bruker til å lage en sandwich. I seg selv virker det ikke så mye, men det er akkurat slik det er ment å være, og denne tilsynelatende "tomhet" er hvorfor den har så mye potensial. Det er kapasiteten til et uendelig utvalg av fyllinger som gir deg noe fantastisk.
En sandwich, i gårPrøvde en peanøttsmør sandwich og likte det ikke? Det er absolutt ingen grunn til å sverge brød og alle slags smørbrød for alltid. I stedet fortsett å prøve neste fylling, og du kan bare oppdage noe som blir en fantastisk ny del av ditt daglige liv.
PostCSS er en helt annen tilnærming til CSS. En frontendentreprenør fra London jeg snakket med, beskrev den som "en sveitsisk hærkniv for CSS-produksjon", og det er en helt passende beskrivelse.
La oss ta en titt på noen av de tingene som gjør PostCSS så spesiell.
Så utrolig som PostCSS selv er, det er den lange listen over forskjellige plugins som virkelig gjør det skinnende. Når du leser listen over tilgjengelige plugins på PostCSS GitHub siden, finner du en rekke funksjoner som aldri har vært inneholdt i ett rom før.
Det er plugins for fremtidig syntaks, slik at du kan bruke ting som fargefunksjoner, koniske gradienter, egendefinerte egenskaper, egendefinerte seleksjoner, tilpassede aliaser for medieforespørsler og mye mer.
Det finnes fallback plugins for å lage eldre syntaks, for eksempel å legge til heksadesimale fallbacks for RGBA () farger, legger opacitetsfiltre til IE8, konverterer psuedo-elementvelger for IE8, og genererer px fallbacks for rem enheter.
Over tjue språk utvidelsesplugger er tilgjengelige, inkludert å legge til mixins, variabler, conditionals, for og hver sløyfe, BEM og SUIT stil klasse generasjon og flere flere.
Et utvalg av fargestyrings-plugins er tilgjengelig, som muliggjør konvertering fra ett fargest format til et annet, endrer alfa nivåer, kombinerer farger, genererer fargeblind vennlige fargeskjemaer for å nevne noen få.
Det er rutenett systemer, optimalisering verktøy, plugins som legger til snarveier og stenografi, linters og andre analyser og rapporteringsplugger.
Det er ikke mulig å formidle det stadig voksende mangfoldet av det nåværende pluginvalget i noen få avsnitt, så vær sikker på å sjekke ut listen for deg selv.
Flippsiden til den utrolige listen over plugins tilgjengelig for PostCSS, er at du kan bruke så mange eller få av dem som du velger.
Vil du bare bruke PostCSS til å gjøre CSS mer effektiv og krysser nettleservennlig? Legg opp noen optimaliseringsplugger, og du er borte.
Vil du bare bruke PostCSS som en preprocessor? Bruk noen språkforlengelsesprogrammer i stedet, og du er helt innstilt.
Den underliggende filosofien til PostCSS er fin kornmodularitet, der det ikke finnes noen hulking plugins som håndterer flere funksjoner. I stedet blir et plugin opprettet per funksjon, og derfra kan de settes sammen i pakker med plugins med ofte tema funksjonalitet.
For eksempel kan du velge et utvalg av plugins for språkutvidelser og lage din egen tilpassede preprosessor. Alternativt kan du bare laste opp PreCSS-pakken som gir deg automatisk tilgang til flere språkforlengelsesprogrammer samtidig.
Uansett hvor du vil bruke PostCSS, kan du bare kjøre pluginene du trenger for dine spesifikke formål, noe som betyr at du ikke trenger å dra langs ubrukt funksjonalitet som dødvekt.
Det er to hovedårsaker til at PostCSS tester veldig fort i referanser. En er det faktum at du bare må laste inn pluginene du trenger, som beskrevet ovenfor. Den andre er at den kjører på JavaScript.
Du kan kjøre disse referansene for deg selv ved hjelp av https://github.com/postcss/benchmark
Resultatet av en av disse referansene, testanalyser, nestede regler, mixins, variabler og matte var:
PostCSS: 36 ms Rework: 77 ms (2,1 ganger langsommere) libsass: 136 ms (3,8 ganger langsommere) Mindre: 160 ms (4,4 ganger langsommere) Stylus: 167 ms (4,6 ganger langsommere) Stylecow: 208 ms (5,7 ganger langsommere) Ruby Sass: 1084 ms (30,1 ganger langsommere)
Plugins for PostCSS er skrevet i JavaScript, og som sådan kan alle som kan skrive JavaScript, lage et plugin for ethvert formål de vil. For å gi deg en ide, anser jeg meg ikke som en hardkjerne-JavaScript-utvikler på noen måte, men etter å ha oppdaget PostCSS kunne jeg lage mitt første fullt funksjonelle plugin innen løpet av noen timer.
Preprosessorprosjekter som Stylus, Sass og LESS gjør en fantastisk jobb, men de kan ikke være alt for alle. De må bestemme hvilke funksjoner som best vil betjene deres brukerbasen som helhet. Hvis det er funksjonalitet du vil ha, kan du lage en funksjonsforespørsel, men det kan eller ikke anses å være i samsvar med prosjektets bredere behov.
Selv om du gjør en funksjonsforespørsel som anses som egnet, er prosjektlederne vanligvis ubetalte frivillige som kanskje ikke har tid til å utvikle den. Så hvis du ikke har ferdighetsnivået for å skape det sagt, har du selv lykke til.
Med PostCSS derimot trenger du ikke å spørre noen. Hvis du vil ha en ny funksjon, kan du gå videre og gjøre det. Fra min erfaring vil JavaScript-opplevelsesnivået som kreves for å lage et PostCSS-plugin, kunne håndteres for mange frontend-utviklere.
I en senere opplæring i denne serien vil vi gå gjennom etableringen av et grunnleggende PostCSS-plugin. Selv om du ikke anser deg selv som en JavaScript-ekspert, tror jeg at du finner PostCSS-pluginopprettingen ganske oppnåelig.
En veldig stor del av PostCSS-plugins krever ikke bruk av egendefinert syntaks, som det er vanlig med preprosessorer. Snarere kan de brukes til vanlig CSS. Dette betyr at du kan bruke PostCSS med hvilken som helst CSS-fil du finner deg i besittelse av, for eksempel fullførte stilark fra en frontendramme, fra andres prosjekt eller en Normalize.css-fil for eksempel.
Det betyr også at du ikke er låst ute av prosjekter som bruker en bestemt preprosessor, det være seg Stylus, Sass eller LESS, fordi du alltid kan bruke PostCSS til det kompilerte CSS. Hvis du for eksempel bruker Foundation via Sass, kan du kjøre optimalisering og fremtidige syntaxplugins etter at du har generert prosjektets CSS-filer.
Vi begynner også å se hele bibliotekene bygget med PostCSS, hvor de tidligere kunne ha blitt skrevet i Stylus, Sass eller LESS.
For eksempel opprettholder Cory Simmons opprinnelig både Stylus og Sass versjoner av sitt Lost Grid-system, slik at brukerne av begge preprosessorer kunne få tilgang. Deretter sendte han prosjektet til PostCSS, noe som betyr at nå kan alle bruke Lost, inkludert Stylus og Sass-brukere, men også mindre brukere og folk som ikke jobber med en preprocessor i det hele tatt.
Å være JavaScript-basert, krever PostCSS ikke at du har installert Ruby, og den har klare integreringer for flere utviklingsverktøy.
Accentsconagua
@ regler i CSSnpm installasjon. Dette muliggjør enkel deling av PostCSS-prosjekter, til tross for det store antallet mulige variasjoner i plugin-oppsett.Vi går gjennom hvordan du kan få oppsett for å bruke PostCSS i den kommende "Hurtigstartguide" -delen av denne serien.
Det første du trenger å vite er at PostCSS plukker opp damp raskt, og med god grunn, så nå er det på tide å bygge på en klar forståelse av hvordan det kan hjelpe utviklingsprosessene dine.
I denne serien skal vi sparke ved å sette deg igjennom hvordan du kommer i gang med PostCSS via opplæringen:
Derfra tar vi en nærmere titt på flere av de forskjellige måtene du kan bruke PostCSS i opplæringen:
Til slutt vil vi pakke opp ved å ta deg gjennom lage ditt eget grunnleggende PostCSS-plugin.
Du kan legge merke til et iøynefallende fravær av en veiledning om bruk av PostCSS for å aktivere fremtidig CSS, spesielt gitt mange mennesker ser de to som nesten synonymt.
Årsaken til dette midlertidige fraværet er det ledende pluginet for fremtidig CSS, cssnext, ser ut som om det er i ferd med å gjennomgå en større transformasjon som kan betydelige endringer i trinnene som kreves for å bruke den. Som sådan vil vi holde øye med det og gi deg en ny opplæring når prosjektet har gjort overgangen.
Så la oss begynne! I den neste opplæringen kommer vi rett inn i vår "Quickstart Guide" og viser deg de raskeste måtene å komme i gang med PostCSS. jeg ser deg der!
