CSS Post-Processorer för nybörjare Tips och resurser

CSS förbehandling är ett koncept som de flesta webbutvecklare redan har lärt sig eller läst om. Vi har noggrant täckt CSS-förbehandlingen för att hjälpa utvecklare att få fart på den här framträdande tekniken. Men vad sägs om post-processorer?

Dessa relativt nya verktyg är lika i den meningen att de påverka webbutvecklings arbetsflödet, men de arbetar på andra sidan av CSS utveckling (“posta” utveckling).

I det här inlägget vill jag presentera grunderna för efterbehandling, hur det fungerar, varför du skulle använda det och dela några bibliotek / verktyg du kan använda för att skapa ditt CSS-spel med efterbehandling.

Post vs förbehandling

De förbehandlingsrevolutionen hände när Sass / LESS slog på scenen. Dessa verktyg tillåter utvecklare att använda variabler, loopar, funktioner och mixins inom CSS. Detta gör nästan grundläggande CSS-utveckling liknar ett programmeringsspråk med utökad funktionalitet.

Efterbehandling händer efter att du redan producerat den vanliga CSS, och vill förläng det vidare genom automatisering. Detta kan inkludera förlängning av klassväljare, eller autoförbindande prefix för vissa CSS-egenskaper.

Generellt sett har förbehandlingen sin egna stylesheet språk, som Sass och mindre, det konvertera till ren CSS. Efterbehandling tar den grundläggande CSS, och gäller automatisering / repetition.

Här är ett citat från ett inlägg som också är källan till bilden ovan. Jag tycker författaren Stefan Baumgartner summerar skillnaden upp briljant.

På ett sätt verkar båda dessa som automatiseringsverktyg, som bara fungerar på olika sätt. Till exempel är en vanlig smärta löst genom efterbehandling att autofilm prefix för nyare CSS3 egenskaper.

Men detta kan också göras i Sass med tillägg. Så är det verkligen en skillnad? Här är ett annat bra citat från samma post:

Även om detta kan vara sant i teoretisk mening skapar webbutvecklingsgemenskapen fortfarande en uppdelning mellan dessa verktyg. Av denna anledning rekommenderar jag starkt att frontendutvecklare åtminstone läser om efterprocessorer och att veta vad de kan göra.

Passa efterbehandling i ditt arbetsflöde

Nästan alla referenser PostCSS som den slutgiltiga resursen för efterbehandling. Men PostCSS-laget har öppet tillåtet på Twitter till ändra sin titel för att verbet inte är helt meningsfullt längre.

PostCSS är inte längre bara ett pre-CSS eller post-CSS verktyg. Det kan faktiskt arbeta i båda områdena! Detta förklarar vidare citatet från tidigare som säger att alla CSS-verktyg koka ner till en sak - bearbetning.

PostCSS använder JavaScript plugins till automatisera ditt CSS-arbetsflöde, och du kan även skriva ditt eget JS-plugin för att utöka PostCSS-biblioteket. Om du vill komma igång med PostCSS kolla in den här introduktionshandledningen på Smashing Magazine. Om du redan använder och förstår Sass kommer du snabbt ta upp Post CSS.

För att bygga upp ditt eget CSS-arbetsflöde före och efter, börja med gör en lista över dina smärtpunkter, som:

• autofixering av CSS-gradienter
• automatisk organisation för CSS-regler
• bifogar polyfills för vissa egenskaper
• generera bild dimensioner för bakgrundsbilder

Observera att alla dessa saker kan göras i både för- och efterbehandling. Det är viktigt att inse att CSS före / efterbehandling snabbt går samman en i samma sak.

I stället för att bryta ner dina mål i olika stadier av bearbetning är det bättre att lista dem som mål, sedan gå på en söka efter rätt verktyg.

Bästa efterbehandlingsverktyg

Jag har försökt att undvika att ange tillägg i det här avsnittet, eftersom Sass & PostCSS har så många saker att välja mellan. Ärligt talat kunde du komma med bara de biblioteken, men jag vill också erbjuda några alternativ för mer specifika lösningar.

Pleeease

Om du redan arbetar med Node.js, verkar Pleeease som ett självklart val. Den har många typiska CSS-bearbetningsfunktioner, till exempel import av filer, variabler / funktioner, automatisk minifiering och fallback-stöd för nya element som SVGs.

Webbplatsen har också en interaktiv lekplats för alla som vill prova biblioteket online utan att ladda ner en kopia lokalt.

Välsigna

Jag kommer ihåg när Internet Explorer 6 fortfarande var en olägenhet, och det är trevligt att veta att IE-utvecklingen har förbättrats - men inte så mycket. Medan jag skulle vilja berätta för dig att IE-användningen är i princip borta, så verkar det inte vara sant.

Lyckligtvis är Bless CSS en lösning som upptäcker potentiella IE-relaterade problem i din CSS, och skapar lösningar med efterbehandling. Den körs på Node.js, så det passar bra in i det typiska NPM / Gulp-arbetsflödet.

CSSNext

Här är ett riktigt coolt bibliotek som låter dig göra det bygg CSS med mer avancerad funktionalitet som för närvarande inte stöds. CSSNext-biblioteket innehåller stöd för udda CSS4-funktioner, som grå(), som för närvarande endast finns i W3C-utkast.

Jag tror inte att varje utvecklare behöver det här biblioteket. Det är mycket specifikt, och löser inte dagliga problem, men det kan ge dig en smak av kommande CSS4-specifikationer samtidigt som du konverterar syntaxen till moderna CSS3.

Stylecow

Om webbläsarsupport är ett problem för dig, då Stylecow är en nödvändighet. Med detta kraftfulla bibliotek kan du utveckla CSS bara för din favorit webbläsare. Därefter kan du köra kommandoradsverktyget genom Node, och din CSS kommer att vara uppdaterad för alla webbläsare du vill stödja.

Du kan ladda ner Stylecow från GitHub, och det kommer med en otroligt detaljerad dokumentation.

-prefixfria

Slutligen vill jag dela -prefixfria bibliotek som också är ett älskat verktyg för CSS-utveckling, som det tillåter dig att använd unprefixed CSS egenskaper. Alla vill använda moderna CSS-egenskaper, som animeringar och gradienter, men ingen vill kopiera / klistra verbose-kod manuellt.

Med detta plugin behöver du inte ens köra din CSS via en postprocessor på din dator. Det kan också fungera som en webbläsare inkluderar det som körs på användarens dator till uppdatera automatiskt CSS-filer.

Autoprefixer, som ingår i PostCSS-biblioteket, är förmodligen ett bättre val för lokal efterbehandling. Därför sa jag förut om du använder antingen LESS eller Sass tillsammans med PostCSS, så har du allt du behöver för ett imponerande CSS-utvecklings arbetsflöde.

Avslutar

Efterbehandling är mer av en fångstfras än en riktig teknik, även om den har sin plats i CSS-arbetsflödet, som hela processen med att skriva moderna CSS har dramatiskt förbättrats av dessa verktyg. Jag kan bara rekommendera att utvecklare tar dig djupare för att hitta det som fungerar bäst för dem.

Om du letar efter ännu mer information om efterbehandling, ta en titt på dessa relaterade artiklar:

• Vad kommer att spara oss från den mörka sidan av CSS-förprocessorer?
• En titt på att skriva framtida CSS med PostCSS och cssnext
• CSS Preprocessing (SASS eller LESS) vs CSS Postprocessing