Share
Als er iets is dat u echt moet weten over PostCSS, dan is dat het je moet leren wat het is en hoe je het moet gebruiken zsm.
In deze serie gaan we een diepe duik nemen in PostCSS en nemen we alle belangrijke manieren door waarop u het kunt gebruiken. Als je nog niet hebt gehoord waar PostCSS toe in staat is, bereid je dan voor op een moedige nieuwe CSS-wereld.
PostCSS groeit razendsnel in populariteit. Steeds meer mensen beginnen te begrijpen wat het biedt, genieten van dat "gloeilamp moment" wanneer ze beseffen hoe ze het uniek kunnen gebruiken in hun eigen projecten.
In 2014 waren er in totaal iets minder dan 1,4 miljoen downloads voor dit jaar, maar van januari tot juni 2015 waren er al meer dan 3,8 miljoen downloads.
Autoprefixer, een zeer populaire PostCSS-plug-in, wordt gebruikt door Google, Shopify, Twitter, Bootstrap en CodePen. WordPress gebruikt ook Autoprefixer, evenals de RTLCSS-plug-in. En Alibaba gebruikt verschillende PostCSS-plug-ins, maar ontwikkelt ook zijn eigen plugins en draagt bij aan andere plugin-projecten.
Verderop heeft Mark Otto het gehad over Bootstrap versie 5 die in PostCSS is geschreven:
Oh, btw-Bootstrap 4 staat in SCSS. En als je erom geeft, zal v5 waarschijnlijk in PostCSS zijn, omdat heilige rotzooi dat cool klinkt.
- Mark Otto (@mdo) 23 april 2015
PostCSS is zojuist geïntegreerd in CodePen.io en kan inline worden gebruikt door het te selecteren in de CSS-instellingen:
PostCSS op CodePenPostCSS groeit, het groeit snel, en met goede reden.
Dus wat is PostCSS? De beste definitie komt van de eigen GitHub-pagina van het project:
"PostCSS is een hulpmiddel voor het transformeren van CSS met JS-plug-ins. Deze plug-ins kunnen variabelen en mixins, transparante CSS-syntaxis van de toekomst, inline-afbeeldingen en meer ondersteunen.
In een notendop neemt PostCSS CSS en verandert het in een vorm van data die JavaScript kan manipuleren. JavaScript-gebaseerde plug-ins voor PostCSS voeren vervolgens de genoemde codemanipulaties uit. PostCSS zelf verandert uw CSS niet, het maakt alleen de weg vrij voor plug-ins om alle transformaties uit te voeren waarvoor ze zijn ontworpen.
Er zijn vrijwel geen beperkingen aan het soort manipulatie. PostCSS-plug-ins kunnen van toepassing zijn op CSS. Als je erover kunt nadenken, kun je waarschijnlijk een PostCSS-plug-in schrijven om het te laten gebeuren.
PostCSS-plug-ins kunnen zich gedragen als preprocessors; ze kunnen code optimaliseren en autoconfixen, ze kunnen toekomstige syntaxis toevoegen, pluisvorming, ze kunnen variabelen en logica verwerken, ze kunnen complete rastersystemen leveren, ze kunnen coderingssnelkoppelingen aanbieden ... de lijst is lang en gevarieerd.
Het feit dat je zo ongeveer alles kunt doen wat je wilt met PostCSS-plug-ins, gecombineerd met het feit dat PostCSS nog relatief nieuw is, heeft geleid tot enkele misvattingen over wat de tool eigenlijk is.
Veel mensen (waaronder ikzelf aanvankelijk) hadden een onvolledige indruk van wat PostCSS eigenlijk is, en hebben daarom ofwel gemist wat PostCSS te bieden heeft, of zijn laat aan tafel gekomen.
Dus voordat we verder gaan, laten we een paar dingen oppoetsen die PostCSS is niet.
Veel ontwikkelaars hebben gezegd dat ze CSS-preprocessors verlaten ten gunste van PostCSS. Ondertussen stellen anderen dat omdat ze van hun huidige preprocessor houden, ze niet van PostCSS houden. PostCSS is dat echter wel niet een preprocessor.
Ja, u kunt het absoluut als een preprocessor gebruiken als u dat wilt, maar u kunt PostCSS ook gebruiken met absoluut geen preprocessor-achtige functionaliteit. Je kunt zelfs je favoriete preprocessor blijven gebruiken conjunctie met PostCSS.
PostCSS heeft het woord "post" in de naam, maar het is ook niet echt een "post-processor". Nabewerking wordt meestal gezien als het maken van een afgewerkt stylesheet met geldige / standaard CSS-syntaxis en het verwerken ervan, om dingen als het toevoegen van voorvoegsels van leveranciers te doen. PostCSS is echter niet beperkt tot uitsluitend op deze manier werken. Zoals hierboven vermeld, kan het zich ook als een pre-processor gedragen.
Het is misschien het beste om alleen maar te denken aan PostCSS als een "processor". Zoals Andrey Sitnik, de maker van PostCSS, zei op Twitter:
Het is tijd om mijn fouten toe te geven. De term "Postprocessor" was slecht. Het PostCSS-team is gestopt om het te gebruiken. https://t.co/vs2AiXGoJy
- PostCSS (@PostCSS) 28 juli 2015
En zoals een waardevolle PostCSS-bijdrager en -plugin-ontwikkelaar Maxime Thirouin op Twitter beschrijft, in plaats van de "post" in PostCSS die verwijst naar "post" -verwerking, kan dit beter worden opgevat als "CSS en meer".
@HugoGiraudel niemand in postcss-bijdragers gebruikt deze expressie meer. Nu is het Postcss als "CSS en verder"
- Maxime Thirouin (@MoOx) 21 juli 2015
Er zijn enkele uitstekende en zeer bekende PostCSS-plug-ins waarmee u in toekomstige syntaxis kunt schrijven, dat wil zeggen met behulp van CSS die in de toekomst beschikbaar zal zijn, maar nog niet breed wordt ondersteund. PostCSS gaat echter niet inherent over het ondersteunen van toekomstige syntaxis.
Sommige ontwikkelaars hebben hun terughoudendheid geuit om PostCSS te gebruiken, omdat dit zegt dat ze niet zeker zijn of ze zich comfortabel voelen bij het schrijven van toekomstige syntaxis. Het schrijven van toekomstige syntaxis is echter slechts een van de vele manieren waarop u PostCSS kunt gebruiken.
Als u dat wilt, kunt u PostCSS gebruiken om uw ontwikkelingsprocessen volledig te revolutioneren zonder dat er een lijn van toekomstige syntaxis in zicht is.
Het succes van de Autoprefixer-plug-in heeft geleid tot de algemene perceptie van PostCSS als iets dat u op uw voltooide CSS uitvoert om het op te ruimen en het te optimaliseren voor snelheid en compatibiliteit met verschillende browsers. Dit is de perceptie die ik zelf had, totdat ik hoorde van de enorme hoeveelheid andere dingen die je met PostCSS kunt bereiken.
Ja, er zijn veel fantastische plug-ins die geweldige opschoon- en optimalisatieprocessen bieden, maar deze zijn slechts een fractie van wat er wordt aangeboden.
Het meest dwingende aan PostCSS is dat het niet beperkt is tot een bepaald type functionaliteit; het vertegenwoordigt een volledig aanpasbare en configureerbare set van functies die potentieel onbeperkt is.
Overweeg WordPress plug-ins als een parallel. E-commerce plug-ins zijn erg populair, maar niemand beschouwt WordPress zelf als een e-commerce-engine, en de verdiensten van WordPress worden niet beoordeeld op basis van de e-commerce plug-ins.
In het geval van PostCSS beschouw ik het graag als het brood dat je gebruikt om een broodje te maken. Op zichzelf lijkt het niet veel, maar dat is precies zoals het bedoeld is, en deze schijnbare "leegte" is waarom het zoveel potentieel heeft. Het is de capaciteit voor een oneindige verscheidenheid aan vullingen die je iets geweldigs geeft.
Een broodje, gisterenProbeerde een pindakaas sandwich en vond het niet leuk? Dat is absoluut geen reden om brood en alle soorten broodjes voorgoed af te zweren. Ga in plaats daarvan naar de volgende vulling en je ontdekt misschien iets dat een geweldig nieuw onderdeel van je dagelijkse leven wordt.
PostCSS is een geheel andere benadering van CSS. Een frontend-aannemer uit Londen die ik sprak, beschreef het als "een Zwitsers zakmes voor CSS-productie" en dat is een heel toepasselijke beschrijving.
Laten we een paar dingen bekijken die PostCSS zo speciaal maken.
Zo verbazingwekkend als PostCSS zelf is, het is de lange lijst van diverse plug-ins die het echt laten schijnen. Wanneer u de lijst met beschikbare plug-ins op de PostCSS GitHub-pagina leest, vindt u een verscheidenheid aan functies die nog nooit eerder in één ruimte zijn opgenomen.
Er zijn plug-ins voor toekomstige syntaxis, zodat u dingen zoals kleurfuncties, kegelsnedes, aangepaste eigenschappen, aangepaste selectors, aangepaste aliassen voor mediaquery's en nog veel meer kunt gebruiken.
Er zijn fallback-plug-ins om legacy-syntaxis te maken, zoals het toevoegen van hexadecimale fallbacks voor RGBA () kleuren, dekkingsfilters voor IE8 toevoegen, psuedo elementselectoren converteren voor IE8 en genereren px fallbacks voor rem units.
Er zijn meer dan twintig taaluitbreidingsplug-ins beschikbaar, waaronder het toevoegen van mixins, variabelen, conditionals, voor en elke loops, BEM- en SUIT-stijluitklasse generatie en nog enkele andere.
Een selectie kleurbeheer-plug-ins is beschikbaar, waardoor conversie van het ene naar het andere kleurformaat mogelijk is, het aanpassen van alfaniveaus, het combineren van kleuren, het genereren van kleurenblinde vriendelijke kleurenschema's, om er maar een paar te noemen.
Er zijn rastersystemen, optimalisatietools, plug-ins die snelkoppelingen en afkortingen, linters en andere plug-ins voor analyse en rapportage toevoegen.
Het is niet mogelijk om de steeds groter wordende diversiteit van de huidige plug-inselectie in een paar paragrafen volledig over te brengen, dus zorg ervoor dat je de lijst voor jezelf leest.
De keerzijde van de ongelooflijke lijst met plug-ins die beschikbaar is voor PostCSS, is dat je er zoveel of zo weinig kunt gebruiken als je wilt.
Wilt u PostCSS gebruiken om uw CSS efficiënter en browservriendelijker te maken? Laad enkele optimalisatie-plug-ins en u bent weg.
Wilt u PostCSS alleen als preprocessor gebruiken? Gebruik in plaats hiervan enkele taalextensie-plug-ins en u bent helemaal klaar.
De onderliggende filosofie van PostCSS is de fijnkorrelige modulariteit, waarbij er geen kolossale plug-ins zijn die meerdere functies aankunnen. In plaats daarvan wordt per functie een plug-in gemaakt en van daaruit kunnen ze worden samengevoegd in packs met plug-ins met een algemeen thema-functionaliteit.
U kunt bijvoorbeeld met de hand een selectie van plug-ins kiezen voor taalextensies en uw eigen aangepaste preprocessor maken. Of u kunt gewoon het PreCSS-pakket laden dat u automatisch toegang geeft tot verschillende taaluitbreidingsplug-ins tegelijk.
Ongeacht de manier waarop u PostCSS wilt gebruiken, kunt u alleen de plug-ins uitvoeren die u nodig hebt voor uw specifieke doeleinden, wat betekent dat u niet-gebruikte functionaliteit als dood gewicht hoeft mee te slepen.
Er zijn twee belangrijke redenen waarom PostCSS erg snel test in benchmarks. Een daarvan is het feit dat je alleen de plug-ins hoeft te laden die je nodig hebt, zoals hierboven beschreven. De andere is dat het op JavaScript werkt.
U kunt deze benchmarks zelf uitvoeren met behulp van https://github.com/postcss/benchmark
Het resultaat van een van deze benchmarks, het testen van paringen, geneste regels, mixins, variabelen en wiskunde, was:
PostCSS: 36 ms Rework: 77 ms (2,1 keer langzamer) libsass: 136 ms (3,8 keer langzamer) Minder: 160 ms (4,4 keer langzamer) Stylus: 167 ms (4,6 keer langzamer) Stylecow: 208 ms (5,7 keer langzamer) Ruby Sass: 1084 ms (30.1 keer langzamer)
Plug-ins voor PostCSS zijn geschreven in JavaScript en als zodanig kan iedereen die JavaScript kan schrijven, een plug-in maken voor elk doel dat zij willen. Om je een idee te geven, beschouw ik mezelf op geen enkele manier als een hard-core JavaScript-ontwikkelaar, maar na het ontdekken van PostCSS kon ik mijn eerste volledig functionele plug-in binnen een paar uur maken.
Preprocessor-projecten zoals Stylus, Sass en LESS doen geweldig werk, maar ze kunnen niet alles voor iedereen zijn. Ze moeten beslissen welke functies hun gebruikersbestand als geheel het best zullen dienen. Als er functionaliteit is die u wilt hebben, kunt u een functieverzoek indienen, maar dit kan al dan niet worden geacht in overeenstemming te zijn met de bredere behoeften van het project.
Zelfs als je een functieverzoek doet dat geschikt wordt geacht, zijn de beheerders van het project meestal onbetaalde vrijwilligers die misschien niet de tijd hebben om het te ontwikkelen. Dus als je niet het vaardigheidsniveau hebt om het zelf te maken, heb je pech.
Met PostCSS hoeft u daarentegen niemand te vragen. Als je een nieuwe functie wilt, kun je doorgaan en het maken. Uit mijn ervaring zou het JavaScript-ervaringsniveau dat vereist is om een PostCSS-plug-in te maken voor veel front-end ontwikkelaars beheersbaar zijn.
In een latere zelfstudie in deze serie zullen we stap voor stap een basis maken voor een PostCSS plug-in. Zelfs als je jezelf niet als een JavaScript-expert beschouwt, denk ik dat je het maken van PostCSS-plug-ins behoorlijk haalbaar zult vinden.
Voor een zeer groot deel van de PostCSS-plug-ins is geen aangepaste syntaxis vereist, zoals gebruikelijk is bij preprocessors. In plaats daarvan kunnen ze worden toegepast op reguliere CSS. Dit betekent dat u PostCSS kunt gebruiken met elk CSS-bestand dat u in bezit hebt, zoals voltooide stylesheets van een front-end framework, van iemand anders's project, of een Normalize.css-bestand bijvoorbeeld.
Het betekent ook dat je niet bent buitengesloten van projecten die een bepaalde preprocessor gebruiken, of het nu Stylus, Sass of LESS is, omdat je PostCSS altijd kunt toepassen op de gecompileerde CSS. Als u bijvoorbeeld Foundation via Sass gebruikt, kunt u optimalisatie en toekomstige syntaxis-plug-ins uitvoeren nadat u de CSS-bestanden van uw project hebt gegenereerd.
We beginnen ook complete bibliotheken te bouwen met PostCSS, waar ze in het verleden mogelijk in Stylus, Sass of LESS zijn geschreven.
Cory Simmons hield bijvoorbeeld aanvankelijk zowel Stylus- als Sass-versies van zijn Lost-rastersysteem bij, zodat gebruikers van beide preprocessors toegang konden krijgen. Vervolgens porteerde hij het project naar PostCSS, wat betekent dat nu iedereen Lost kan gebruiken, inclusief stylus- en Sass-gebruikers, maar ook minder gebruikers en mensen die helemaal niet met een preprocessor werken.
Omdat het op JavaScript is gebaseerd, vereist PostCSS niet dat je Ruby hebt geïnstalleerd en het heeft kant-en-klare integraties voor verschillende ontwikkeltools.
Accentsconagua
@ regels in uw CSSnpm installeren. Dit vergemakkelijkt het eenvoudig delen van PostCSS-projecten, ondanks het grote aantal mogelijke variaties in de installatie van de plug-in.We zullen bekijken hoe u de installatie kunt krijgen om PostCSS te gebruiken in de komende "Snelstartgids" van deze serie.
Het eerste dat u moet weten, is dat de PostCSS snel stoom ophaalt, en dat is niet voor niets, dus nu is het tijd om een duidelijk inzicht te krijgen in hoe het uw ontwikkelingsprocessen kan helpen..
In deze serie gaan we van start met een stap door hoe je aan de slag kunt met PostCSS via de tutorials:
Van daaruit bekijken we verschillende manieren waarop u PostCSS in de tutorials kunt gebruiken:
Eindelijk, we sluiten af met je door het maken van uw eigen standaard PostCSS-plug-in.
U merkt misschien een opvallende afwezigheid van een zelfstudie over het gebruik van PostCSS om toekomstige CSS in te schakelen, vooral gezien veel mensen de twee zien als bijna synoniem.
De reden voor deze tijdelijke afwezigheid is de leidende plug-in voor toekomstige CSS, cssnext, ziet eruit alsof het op het punt staat een grote transformatie te ondergaan die de stappen die nodig zijn om het te gebruiken aanzienlijk kan veranderen. Als zodanig houden we het in de gaten en brengen we je een nieuwe zelfstudie zodra het project de overstap heeft gemaakt.
Dus laten we beginnen! In de volgende tutorial komen we direct in onze "Quickstart Guide" en laten we u de snelste manieren zien om aan de slag te gaan met PostCSS. ik zie je daar!
