Naučite EmotionJS tijekom jutarnje kave - to je tako jednostavno.

Programiranje

EmotionJS je CSS-in-JavaScript knjižnica s nevjerojatnim mogućnostima. Pogledajmo kako se svijet CSS-a razvio do ovog rješenja, a zatim duboko zaronite u ono što danas možete učiniti s njim.

CSS ratovi (rezime)

U posljednjih nekoliko godina vidjeli smo prijelaz na različite vrste načina oblikovanja, a sve na temelju CSS-a. Evo suštine u kronološkom slijedu:

Običan stari CSS

Ovo je klasičan i jednostavan način primjene CSS-a. U našem index.html upućujemo na CSS datoteku, a na naše HTML datoteke primjenjuju se klasična pravila CSS-a.

Ovaj pristup ima problema kada se primjenjuje u opsegu, jer se CSS temelji na specifičnosti s kojom treba pažljivo postupati ako želimo spriječiti CSS sudare.

Također je teško ispraviti pogreške prilikom pregledavanja u pregledniku. Teško je razumjeti koja je kombinacija CSS svojstava utjecala na stil koji vidimo na HTML oznaci.

CSS pretprocesori

Obični stari CSS imao je određena ograničenja, rađajući neka proširenja CSS-a poput Less i Sass. Ova jezična proširenja omogućuju nam pisanje na jeziku s jačim mogućnostima. Primjeri uključuju gniježđenje CSS selektora, funkcije i još mnogo toga. Naš alat za izgradnju kompilira ove datoteke u jednostavne CSS datoteke i one se primjenjuju na uobičajen način.

CSS moduli

Ovaj pristup uveden je kada je web razvoj počeo web stranice tretirati kao stabla komponenata. CSS-moduli imaju za cilj samostalno oblikovanje komponente, ne utječući na druge dijelove korisničkog sučelja i ne utječući na njih.

Nakon uvođenja CSS-modula u naš projekt, svaka komponenta upućuje na CSS datoteku s uobičajenim ili unaprijed obrađenim CSS-om. Tijekom postupka gradnje, naš sustav gradnje (kao što je webpack) uzima svaku CSS klasu, doda joj prefiks s imenom komponente i sufiksira je jedinstvenim identifikatorom, tako da je klasa jedinstvena.

Ovaj je pristup izvrstan jer je vrlo lako postići CSS izolaciju. Također je lako razumjeti koja su se CSS pravila primijenila na naše HTML elemente i gdje su nastala. Bio sam veliki zagovornik ovog pristupa - sve dok EmotionJS nije objavljen.

CSS-u-JS

Ovaj pristup izaziva praksu izoliranja CSS-a u CSS datoteke. Omogućuje nam da svoja CSS pravila unutar našeg JavaScript koda navedemo kao JS objekte.

Neki okviri poput Reactimaju ugrađenu podršku za ovu metodu. Nekoliko je knjižnica proizašlo iz potrebe za pružanjem izoliranijeg i skalabilnijeg rješenja. Najbolje knjižnice su Styled Components i EmotionJS.

Razradimo to.

Stilizirane komponente naspram EmotionJS!

Stilizirane komponente stigle su prve, a na EmotionJS je pod velikim utjecajem.

Stilizirane komponente su jednostavne, male React komponente. Oni definiraju HTML oznaku i njene stilove kao funkciju rekvizita komponente.

Ovo izolira HTML i CSS semantiku od naših funkcionalnijih React komponenata. To zauzvrat pruža čitljivije i održivije razvojno iskustvo.

Primjer stiliziranih komponenata:

Ovdje vidimo HTML gumb s nekim CSS rekvizitima.

colorI backgroundCSS svojstva određuju kao funkcija jednog primarypomoćnog pribora koji prolazi (ili ne) u komponenti.

Primijetite kako je JSX vrlo jednostavan i semantički, a CSS i HTML dio izolirani su u stiliziranu komponentu.

Pogledajmo sada EmotionJS.

EmotionJSuzima snagu stiliziranih komponenata i dodaje još korisnu funkcionalnost (ujedno i najcool logotip ikad).

Pokažimo stvari koje sam smatrao najupečatljivijim s EmotionJS.

Jedna stvar koju sam do sada mrzio bilo je održavanje CSS medijskih upita.

CSS pravila za svaku točku prekida boravila su u različitim područjima CSS datoteka. Bilo je teško vidjeti i nositi se s preklapajućim svojstvima.

U EmotionJS možemo stvoriti konstantu koja zadržava širinu točke prekida uz pomoć Facepaint biblioteke.

Tada se možemo pozivati ​​na ovu konstantu, deklarirajući na jednom mjestu vrijednosti CSS svojstva za svaku točku prekida.

Razlomimo ovaj primjer:

  • Redak 4-9: definiramo širinu točke prekida na jednom mjestu u našoj aplikaciji
  • Redak 13–23: definiramo komponentu gumba koja je div oznaka s nekim CSS svojstvima. Njegove vrijednosti widthi heightvrijednosti definirane su kao niz vrijednosti, po jedna za svaku točku prekida. Primijetite kako ne trebamo navesti pxjedinice. Dodaju se automatski. Također primijetite da background-colorsvojstvo ovisi o primarypotpornom položaju komponente Button. Ovo je slično primjeru stiliziranih komponenata.
  • Redak 26–33: u našoj komponenti React referenciramo naš gumb EmotionJS i koristimo ga kao JSX oznaku

Ostale značajke EmotionJS

EmotionJS ima još nekoliko načina za postizanje nekih od ovih mogućnosti:

  • CSS oslonac - našim React komponentama možemo pružiti CSS rekvizit koji je JavaScript objekt ili niz koji definira naša CSS svojstva.
  • Upiti za medije mogu se ciljati i pomoću CSS prop pristupa

Da zaključimo: dobro, loše i emocionalno

Pros:

  • Jednostavno integriranje i zamjena ostalih CSS rješenja.
  • Jednostavno prepoznavanje i uklanjanje mrtvog koda u usporedbi s drugim rješenjima.
  • Lakše je raditi s medijskim upitima, vrijednosti se skupljaju.
  • Komponente reakcije postaju semantičnije kad se izoliraju HTML i CSS.

Protiv:

  • Pomoću CSS-modula lako je razumjeti odakle dolazi CSS pravilo prilikom pregleda u pregledniku. To je zato što se nazivi klasa generiraju s prefiksima naziva komponente React. S EmotionJS, to se ne događa.
  • Ako definiramo CSS svojstvo za jedan medijski upit, trebamo ga definirati i za ostatak, jer pružamo niz vrijednosti. U puno slučajeva samo želimo uputiti jedan ili dva medijska upita, a ostale ostaviti kao zadanu vrijednost.

Presuda

EmotionJS je sljedeći korak u dobrom smjeru, baveći se zamkama CSS-a. Pruža izolirano, održivo okruženje održavajući naše glavne komponente logički usmjerenima i semantičkim.

Doslovno mi je trebalo deset minuta da ga naučim i integriram i to je veliko poboljšanje na ovom području.

Ne zaboravite pljeskati ako vam se ovo svidjelo i slijedite me na Twitteru: //twitter.com/shahar_taite