CSS post-procesori za početnike Savjeti i resursi
CSS predobrada je koncept koji je većina web-programera već naučila ili čitala. Mi smo detaljno obradili CSS preradu kako bismo pomogli razvojnim inženjerima da ubrzaju ovu prevladavajuću tehnologiju. Ali što je s tim post-procesora?
Ovi relativno novi alati su slični u smislu da oni utjecati na tijek web razvoja, međutim oni djeluju na druga strana razvoja CSS-a (“pošta” razvoj).
U ovom postu, želim vam predstaviti osnove naknadne obrade, kako radi, zašto biste ga koristili i dijelili nekoliko knjižnica / alata koje možete koristiti za podizanje CSS-a s naknadnom obradom.
Post u odnosu na prethodnu obradu
revolucija prije obrade dogodilo se kada Sass / LESS pogodio je scenu. Ovi alati omogućuju programerima korištenje varijabli, petlji, funkcija i mješavina unutar CSS-a. To gotovo čini osnovni CSS razvoj slično programskom jeziku s proširenom funkcionalnošću.
Naknadna obrada događa se nakon što ste već stvorili običan CSS i želite proširiti dalje kroz automatizaciju. To može uključivati proširiti razredne selektore, ili automatsko dodavanje prefiksa za određena svojstva CSS-a.
Općenito govoreći, predobrada ima svoj vlastite jezike stilova, kao što su Sass i LESS, to pretvoriti u čisti CSS. Naknadna obrada uzima taj osnovni CSS, i primjenjuje se automatizacija / ponavljanje.
Evo citata iz posta koji je također izvor gornje slike. Mislim da je autor Stefan Baumgartner zbilja razlikuje briljantno.
Na neki način, oba se čine kao alati za automatizaciju, samo rade na različite načine. Na primjer, uobičajena bol koja se rješava naknadnom obradom je automatsko dodavanje prefiksa za novija svojstva CSS3.
Ali to se također može učiniti u Sassu s nastavcima. Dakle, postoji li stvarno razlika? Evo još jednog velikog citata s istog posta:
Iako to može biti istinito u teoretskom smislu, zajednica za razvoj weba još uvijek stvara podjelu između tih alata. Iz tog razloga preporučujem da programeri budu bar pročitali o post-procesorima i da znaju što mogu učiniti.
Namjestite naknadnu obradu u svoj tijek rada
Skoro svatko upućuje PostCSS kao konačni resurs za naknadnu obradu. Međutim, PostCSS tim je otvoreno priznao na Twitteru mijenjaju naslov jer proročanstvo više nema smisla.
PostCSS više nije samo pre-CSS ili post-CSS alat. Može zapravo rad u oba područja! Ovo dalje objašnjava citat iz ranijih navoda da se svi CSS alati svodi na jednu stvar - obrada.
PostCSS koristi JavaScript dodatke automatizirajte CSS tijek rada, možete čak i napisati vlastiti JS dodatak za proširenje PostCSS knjižnice. Ako želite početi s PostCSS provjerite ovaj uvod o Smashing Magazine. Ako već koristite i razumijete Sass, brzo ćete pokupiti Post CSS.
Da biste izgradili vlastiti radni tijek obrade CSS-a prije / poslije, započnite izradu popisa vaših bolnih točaka, kao što su:
- automatski prefiksira CSS gradijente
- automatska organizacija za CSS pravila
- dodavanje polifila za određena svojstva
- generiranje dimenzija slike za pozadinske slike
Imajte na umu da se sve to može učiniti i prije i nakon obrade. Važno je shvatiti da se CSS pre / post obrada brzo stapa jedan u istu stvar.
Umjesto razbijanja ciljeva u različite faze obrade, bolje je navedite ih kao ciljeve, zatim idite na potražite prave alate.
Najbolji alati za naknadnu obradu
Pokušao sam izbjeći spomenuti proširenja u ovom odjeljku, jer Sass & PostCSS imaju toliko stvari koje možete izabrati. Iskreno, mogli ste samo s tim knjižnicama, ali ja također želim ponuditi nešto alternative za specifičnija rješenja.
Pleeease
Ako već radite s Node.js, Pleeease izgleda kao očigledan izbor. Ima ih mnogo karakteristike CSS-obrade, kao što su uvoz datoteka, varijabli / funkcije, automatsko miniranje i rezervna podrška za novije elemente kao što su SVG-ovi.
Web stranica također ima interaktivno igralište za svakoga tko želi isprobati knjižnicu na mreži bez preuzimanja lokalno.
blagosloviti
Sjećam se kada je Internet Explorer 6 i dalje bio neugodan, i lijepo je znati da se razvoj IE poboljšao - ali ne mnogo. Iako bih vam volio reći da je korištenje IE u osnovi nestalo, to jednostavno ne izgleda istinito.
Srećom, Bless CSS je rješenje koje otkriva potencijalne probleme povezane s IE u CSS-u i stvara rješenja s naknadnom obradom. Ona radi na Node.js, tako da se dobro uklapa u tipični NPM / Gulp tijek rada.
CSSNext
Ovo je stvarno cool knjižnica koja vam omogućuje izgradite CSS s naprednijim funkcijama koji trenutačno nije podržan. CSSNext knjižnica uključuje podrška za ak CSS4 funkcije, kao što su siva (), koji su trenutno prisutni samo u W3C skicama.
Mislim da svakom developeru ova biblioteka neće trebati. To je vrlo specifično i neće riješiti svakodnevne probleme, ali može vam dati okus nadolazećih CSS4 specifikacija dok pretvoriti sintaksu u moderni CSS3.
Stylecow
Ako podrška za preglednik je problem za vas, onda je Stylecow nužnost. Ova moćna knjižnica omogućuje razvoj CSS-a samo za vaš omiljeni preglednik. Zatim možete pokrenuti alat naredbenog retka preko čvora, a vaš će CSS biti ažuriran za sve preglednike koje želite podržati.
Možete preuzeti Stylecow iz GitHub-a, a dolazi s nevjerojatno detaljnom dokumentacijom.
-Prefiks bez
Na kraju želim podijeliti -Prefiks bez knjižnica koja je također omiljeni alat za razvoj CSS-a, jer vam to omogućuje koristiti svojstva CSS-a bez prefiksa. Svatko želi koristiti moderna CSS svojstva, kao što su animacije i gradijenti, ali nitko ne želi ručno kopirati / zalijepiti opširan kod.
S ovim dodatkom ne morate čak pokrenuti svoj CSS putem postprocesora na računalu. Također može funkcionirati i kao preglednik koji se pokreće na korisničkom računalu automatski ažurira CSS datoteke.
Autoprefixer, koji je dio PostCSS knjižnice, vjerojatno je čak i bolji izbor lokalna naknadna obrada. Zato sam prije rekao da ako koristite LESS ili Sass zajedno s PostCSS-om, tada ćete imati sve što vam je potrebno za impresivan CSS razvojni tijek rada.
Završavati
Naknadna obrada više je ulovna fraza nego prava tehnologija, iako ima svoje mjesto u CSS tijeku rada, kao cijeli proces pisanja modernog CSS-a dramatično je poboljšan tim alatima. Mogu samo preporučiti da programeri kopaju dublje kako bi pronašli ono što je najbolje za njih.
Ako tražite još više informacija o naknadnoj obradi, zavirite u te srodne članke:
- Što će nas spasiti od tamne strane CSS predprocesora?
- Pogled u pisanje budućeg CSS-a s PostCSS i cssnext
- CSS predobrada (SASS ili LESS) vs CSS Postprocesiranje
