Share
Om det finns en sak du verkligen behöver veta om PostCSS, så är det det du borde lära dig vad det är och hur du använder det så fort som möjligt.
I denna serie kommer vi att ta ett djupt dykk i PostCSS och ta dig igenom alla de stora sätten du kan använda den. Om du inte redan har fått ditt sinne blås av vad PostCSS kan klara sig, gör dig redo för en modig ny CSS-värld.
PostCSS har ökat i popularitet vid breakneck-hastighet. Fler och fler människor börjar förstå vad det erbjuder, njuter av det "glödlampa ögonblicket" när de inser hur de kan använda det unikt i sina egna projekt.
Under 2014 var det ungefär 1,4 miljoner nedladdningar totalt för året, men från januari till juni 2015 hade det redan över 3,8 miljoner nedladdningar.
Autoprefixer, ett mycket populärt PostCSS-plugin, används av Google, Shopify, Twitter, Bootstrap och CodePen. WordPress använder även Autoprefixer, liksom RTLCSS-plugin. Och Alibaba använder flera PostCSS-plugins, samt utvecklar egna och bidrar till andra pluginprojekt.
Utöver det har Mark Otto pratat om Bootstrap version 5 skrivet i PostCSS:
Åh, btw-Bootstrap 4 kommer att vara i SCSS. Och om du bryr dig, kommer v5 sannolikt att vara i PostCSS eftersom helig skit som låter coolt.
- Mark Otto (@mdo) 23 april 2015
PostCSS har just integrerats i CodePen.io och kan användas inline genom att välja det inom CSS-inställningarna:
PostCSS på CodePenPostCSS växer, det växer snabbt och med god anledning.
Så vad är PostCSS? Den bästa definitionen kommer från projektets egen GitHub-sida:
"PostCSS är ett verktyg för att transformera CSS med JS plugins. Dessa plugins kan stödja variabler och mixins, transpilera framtida CSS-syntax, inline-bilder och mer.
I ett nötskal tar PostCSS CSS och omvandlar den till en form av data som JavaScript kan manipulera. JavaScript-baserade plugins för PostCSS utför sedan nämnda kodmanipulationer. PostCSS själv förändrar inte din CSS, det banar bara vägen för plugins för att utföra vilka transformationer de har utformats för att göra.
Det finns väsentligen inga begränsningar för den typ av manipulering som PostCSS-plugins kan gälla för CSS. Om du kan tänka på det kan du förmodligen skriva ett PostCSS-plugin för att få det att hända.
PostCSS-plugins kan fungera som preprocessorer; de kan optimera och autoprefix-kod, de kan lägga till framtida syntax, de kan utföra linting, de kan bearbeta variabler och logik, de kan tillhandahålla kompletta rutsystem, de kan erbjuda kodande genvägar ... listan är lång och varierad.
Det faktum att du kan göra nästan vad som helst med PostCSS-plugins, kombinerat med PostCSS, är fortfarande relativt nytt, har lett till vissa missuppfattningar om vad verktyget egentligen är.
Många människor (som jag inkluderat i början) har haft ett ofullständigt intryck av vad PostCSS faktiskt är och har därför antingen missat vad PostCSS har att erbjuda, eller kom sent till bordet.
Så innan vi går längre, låt oss rensa upp några av de saker PostCSS är inte.
Många utvecklare har sagt att de överger CSS-förprocessorer till förmån för PostCSS. Samtidigt säger andra att eftersom de föredrar sin nuvarande preprocessor gillar de inte PostCSS. Men PostCSS är inte en förprocessor.
Ja, du kan absolut använda den som en förbehandlare om du vill, men du kan också använda PostCSS med absolut ingen preprocessorliknande funktionalitet. Du kan till och med fortsätta att använda din favoritprocessor i samband med PostCSS.
PostCSS har ordet "post" i namnet, men det är inte en riktigt "postprocessor" heller. Efterbehandlingen ses typiskt som att man tar ett färdigt stilark som innehåller giltig / standard CSS-syntax och bearbetar den, för att göra saker som att lägga till leverantörs prefix. PostCSS är dock inte begränsat till att fungera uteslutande på detta sätt. Som nämnts ovan kan den fungera som en förprocessor också.
Det är kanske bäst att bara tänka på PostCSS som en "processor". Som Andrey Sitnik, PostCSS: s skapare, sa på Twitter:
Det är dags att erkänna mina misstag. "Postprocessor" termen var dålig. PostCSS-teamet stoppade att använda det. https://t.co/vs2AiXGoJy
- PostCSS (@PostCSS) 28 juli 2015
Och som den produktiva PostCSS-bidragsgivaren och plugin-utvecklaren Maxime Thirouin, som beskrivs på Twitter, snarare än "posten" i PostCSS som hänför sig till "post" -processering, kan det bättre betraktas som "CSS och bortom".
@HugoGiraudel ingen i postcss-bidragsgivare använder detta uttryck längre. Nu är det Postcss som "css and beyond"
- Maxime Thirouin (@MoOx) 21 juli 2015
Det finns några utmärkta och mycket välkända PostCSS-plugins som låter dig skriva i framtida syntax, det vill säga med hjälp av CSS som kommer att finnas tillgänglig i framtiden men som ännu inte är allmänt stödjande. PostCSS är dock inte inneboende om att stödja framtida syntax.
Vissa utvecklare har uttryckt ovillkor att använda PostCSS och säger att det beror på att de inte är säkra på att de är bekväma med att skriva framtida syntax. Att skriva framtida syntax är dock bara ett av många sätt att använda PostCSS.
Om du väljer det kan du använda PostCSS för att helt revolutionera dina utvecklingsprocesser utan en rad framtida syntax i sikte.
Succesen för Autoprefixer-plugin har lett till den gemensamma uppfattningen av PostCSS som något du kör på din färdiga CSS för att städa upp den och optimera den för snabb och kors webbläsarkompatibilitet. Detta är uppfattningen jag hade själv, tills jag lärde mig om det stora utbudet av andra saker du kan uppnå med PostCSS.
Ja, det finns många fantastiska plugin-program som erbjuder bra rengörings- och optimeringsprocesser, men det här är bara en bråkdel av vad som erbjuds.
Den mest övertygande saken om PostCSS är att den inte är begränsad till någon typ av funktionalitet. Det representerar en helt anpassningsbar och konfigurerbar uppsättning funktionalitet som är potentiellt obegränsad.
Tänk på WordPress-plugins som en parallell. E-handel plugins är mycket populära, men ingen anser WordPress sig som en e-handelsmotor, och fördelarna med WordPress utvärderas inte utifrån dess e-handels plugins.
När det gäller PostCSS tycker jag om att det är som det bröd du använder för att göra en smörgås. I sig själv verkar det inte så mycket, men det är precis vad det är meningen att vara, och denna uppenbara "tomhet" är varför den har så mycket potential. Det är kapacitet för en oändlig mängd fyllningar som ger dig något fantastiskt.
En smörgås, igårFörsökte en jordnötssmörsmörgås och tyckte inte om det? Det är absolut ingen anledning att svära av bröd och alla typer av smörgåsar för alltid. I stället fortsätter du att försöka nästa fyllning och du kan bara upptäcka något som blir en fantastisk ny del av ditt dagliga liv.
PostCSS är en helt annan inställning till CSS. En frontendentreprenör från London talade jag med att beskriva den som "en schweizisk armékniv för CSS-produktion" och det är en helt lämplig beskrivning.
Låt oss ta en titt på några av de saker som gör PostCSS så speciell.
Så fantastiskt som PostCSS själv är det den långa listan med olika plugins som verkligen gör det klart. När du läser listan med tillgängliga plugins på PostCSS GitHub-sidan hittar du en mängd funktioner som aldrig har förekommit i ett utrymme före.
Det finns plugins för framtida syntax, så att du kan använda saker som färgfunktioner, koniska gradienter, anpassade egenskaper, anpassade selektörer, anpassade aliaser för mediafrågor och mycket mer.
Det finns fallback plugins för att skapa äldre syntax, till exempel att lägga till hexadecimala fallbacks för RGBA () färger, adderar filter för IE8, konverterar psuedo-elementselektorer för IE8 och genererar px fallbacks för rem enheter.
Över tjugo språkförlängningspluggar finns tillgängliga, bland annat att lägga till mixins, variabler, villkor, för och varje loop, BEM och SUIT-klassklassegenerering och flera fler.
Ett urval av plugins för färghantering är tillgängligt, vilket möjliggör omvandling från ett färgformat till ett annat, modifiering av alfanumerier, kombination av färger, generering av färgblindiga färgscheman, för att nämna några.
Det finns nätsystem, optimeringsverktyg, plugins som lägger till genvägar och stenografi, linters och andra analyser och rapporteringspluggar.
Det är inte möjligt att helt förmedla den ständigt växande mångfalden av det aktuella pluginvalet i några stycken, så var noga med att kolla in listan för dig själv.
Flip-sidan till den otroliga listan med plugins som finns tillgängliga för PostCSS, är att du kan använda så många eller få av dem som du väljer.
Vill du bara använda PostCSS för att göra din CSS mer effektiv och korsa webbläsarvänlig? Ladda upp några optimerings plugins och du är borta.
Vill du bara använda PostCSS som en förprocessor? Använd istället vissa pluginprogram för språktillägg och du är helt klar.
Den underliggande filosofin för PostCSS är fin kornmodularitet, varigenom det inte finns några hulpluggar som hanterar flera funktioner. I stället skapas ett plugin per funktion, och därifrån kan de monteras i paket med plugins med gemensamt temafunktionalitet.
Till exempel kan du välja ett urval pluginprogram för språktillägg och skapa en egen anpassad förbehandlare. Eller alternativt kan du bara ladda upp PreCSS-paketet som ger dig automatisk åtkomst till flera språkförlängningspluggar samtidigt.
Oavsett hur du vill använda PostCSS, kan du bara köra de plugin du behöver för dina specifika ändamål, vilket innebär att du inte behöver dra över oanvända funktioner som död vikt.
Det finns två huvudskäl som PostCSS testar mycket snabbt i riktmärken. En är det faktum att du bara behöver ladda de plugins du behöver, som beskrivs ovan. Den andra är att den körs på JavaScript.
Du kan köra dessa riktmärken för dig själv med hjälp av https://github.com/postcss/benchmark
Resultatet av en av dessa riktmärken, testningsparsingar, kapslade regler, mixins, variabler och matte var:
PostCSS: 36 ms Rework: 77 ms (2,1 gånger långsammare) libsass: 136 ms (3,8 gånger långsammare) Mindre: 160 ms (4,4 gånger långsammare) Stylus: 167 ms (4,6 gånger långsammare) Stylecow: 208 ms (5,7 gånger långsammare) Ruby Sass: 1084 ms (30,1 gånger långsammare)
Plugins för PostCSS är skrivna i JavaScript, och som sådan kan alla som kan skriva JavaScript skapa ett plugin för alla ändamål de vill ha. För att ge dig en uppfattning anser jag mig inte som en hard core JavaScript-utvecklare på något sätt, men efter att ha upptäckt PostCSS kunde jag göra mitt första fullt fungerande plugin inom några timmar.
Preprocessorprojekt som Stylus, Sass och LESS gör ett underbart jobb, men de kan inte vara allt för alla. De måste bestämma vilka funktioner som bäst ska betjäna sin användarbas som helhet. Om det finns funktionalitet som du vill ha kan du göra en funktionsförfrågan, men det kan eller inte anses vara anpassat till projektets bredare behov.
Även om du gör en funktionsförfrågan som anses vara lämplig, är projektets underhållare vanligen obetalda volontärer som kanske inte har tid att utveckla den. Så om du inte har kunskapsnivån för att skapa den sagda funktionen själv, har du ingen lycka till.
Med PostCSS å andra sidan behöver du inte fråga någon. Om du vill ha en ny funktion kan du fortsätta och göra det. Ur min erfarenhet skulle JavaScript-upplevelsesnivån som krävs för att skapa ett PostCSS-plugin kunna hanteras för många utvecklare av framsidan.
I en senare handledning i denna serie kommer vi att gå igenom skapandet av ett grundläggande PostCSS-plugin. Även om du inte anser dig vara en JavaScript-expert tror jag att du hittar PostCSS-plugin-skapningen för att vara ganska uppnåelig.
En mycket stor del av PostCSS-plugins kräver inte användning av anpassad syntax, vilket är typiskt för preprocessorer. Snarare kan de tillämpas på vanlig CSS. Det betyder att du kan använda PostCSS med någon CSS-fil som du befinner dig i, till exempel färdigställda formatmallar från en frontendram, från någon annans projekt eller en Normalize.css-fil till exempel.
Det innebär också att du inte är låst ur projekt som använder en viss förbehandlare, vare sig det är Stylus, Sass eller LESS, eftersom du alltid kan tillämpa PostCSS på den sammanställda CSS. Om du till exempel använder Foundation via Sass kan du köra optimering och framtida syntax plugins efter att du skapat ditt projekt CSS-filer.
Vi börjar också se hela bibliotek byggda med PostCSS, där de tidigare kunde ha skrivits i Stylus, Sass eller LESS.
Till exempel upprätthöll Cory Simmons ursprungligen både Stylus och Sass versioner av sitt Lost Grid-system, så att användarna av båda förprocessorerna kunde få tillgång. Han överförde sedan projektet till PostCSS, vilket innebär att alla kan använda Lost, inklusive Stylus och Sass-användare, men även LÄSTA användare och personer som inte arbetar med en förprocessor alls.
Eftersom JavaScript är baserat på JavaScript, kräver PostCSS inte att du har installerat Ruby, och det har färdiga integreringar för flera utvecklingsverktyg.
Accentsconagua
@ regler i din CSSnpm installera. Detta underlättar enkel delning av PostCSS-projekt, trots det stora antalet möjliga variationer i plugin setup.Vi går igenom hur du kan få inställningar för att använda PostCSS i den kommande "Snabbstartguiden" av den här serien.
Det första du behöver veta är att PostCSS plockar upp ånga snabbt och av goda skäl, så nu är det dags att bygga upp en tydlig förståelse för hur det kan hjälpa dina utvecklingsprocesser.
I den här serien kommer vi att sparka av genom att förstärka dig hur du kommer igång med PostCSS via handledningarna:
Därifrån tar vi en närmare titt på flera av de olika sätten att använda PostCSS i handledningarna:
Slutligen sätter vi om dig genom att ta dig igenom skapa ditt eget grundläggande PostCSS-plugin.
Du kanske märker en påtaglig avsaknad av en handledning om hur du använder PostCSS för att möjliggöra framtida CSS, särskilt med tanke på att många människor ser de två som nästan synonymt.
Orsaken till denna tillfälliga frånvaro är den ledande plugin för framtida CSS, cssnext, ser ut att det är på väg att genomgå en stor omvandling som kan betydligt ändra de steg som krävs för att använda den. Som sådan kommer vi hålla ett öga på det och få dig en ny handledning när projektet har övergått.
Så låt oss börja! I nästa handledning kommer vi att gå rakt in i vår "Quickstart Guide" och visa dig de snabbaste sätten att komma igång med PostCSS. vi ses där!
