Tanulja meg az EmotionJS-t a reggeli kávé alatt - ez olyan egyszerű.

Az EmotionJS egy CSS-in-JavaScript könyvtár, hihetetlen képességekkel. Nézzük meg, hogyan fejlődött a CSS világa erre a megoldásra, majd mélyen belemerülünk abba, hogy mit tehetsz ma vele.

A CSS háborúk (összefoglaló)

Az elmúlt néhány évben áttérést láthattunk a CSS-alapú különféle stílusmódszerekre. Itt van a lényeg időrendben:

Egyszerű régi CSS

Ez a CSS alkalmazásának klasszikus és egyszerű módja. Az index.html fájlban hivatkozunk egy CSS fájlra, amelyet a CSS klasszikus szabályai alkalmaznak HTML fájljainkra.

Ennek a megközelítésnek problémái vannak, ha széleskörűen alkalmazzák, mivel a CSS a sajátosságon alapul, amelyet óvatosan kell kezelni, ha meg akarjuk akadályozni a CSS ütközéseit.

A böngészőben történő ellenőrzéskor is nehéz hibakeresés. Nehéz megérteni, hogy a CSS tulajdonságok mely kombinációi befolyásolták a HTML címkén látható stílust.

CSS előfeldolgozók

A sima régi CSS-nek voltak bizonyos korlátai, amelyek a CSS néhány kiterjesztését hozták létre, mint például a Less és a Sass. Ezek a nyelvbővítmények lehetővé teszik számunkra, hogy erősebb képességekkel rendelkező nyelven írjunk. Ilyen például a CSS-választó beágyazása, a funkciók és egyebek. A build eszközünk ezeket a fájlokat egyszerű CSS fájlokká állítja össze, és ezeket a szokásos módon alkalmazzák.

CSS modulok

Ezt a megközelítést akkor vezették be, amikor a webfejlesztés elkezdte a weboldalakat összetevők faként kezelni. A CSS-modulok egy komponens önálló stílusának megalkotásáról szólnak, nem befolyásolják a felhasználói felület más részeit és nem befolyásolják őket.

Miután CSS-modulokat bevezettünk a projektünkbe, minden egyes komponens hivatkozik egy CSS-fájlra a szokásos vagy az előfeldolgozott CSS-sel. A build folyamat során a build rendszerünk (például a webpack) minden CSS osztályt felvesz, előtagolja az összetevő nevével, és egyedi azonosítóval látja el, így az osztály egyedi.

Ez a megközelítés nagyszerű, mivel nagyon könnyű elérni a CSS-szigetelést. Könnyű megérteni, hogy mely CSS-szabályokat alkalmazták a HTML-elemeinkre, és hol keletkeztek. Nagy híve voltam ennek a megközelítésnek - az EmotionJS kiadásáig.

CSS-in-JS

Ez a megközelítés kihívást jelent a CSS CSS fájlokba történő elkülönítésének gyakorlatára. Ez lehetővé teszi számunkra, hogy a JavaScript kódunkban JS objektumként megadjuk CSS-szabályainkat.

Néhány keretrendszer, például a Reactbeépített támogatást nyújtanak ehhez a módszerhez. Néhány könyvtár kiderült, hogy szükség van egy elszigeteltebb és skálázhatóbb megoldásra. A legnépszerűbb könyvtárak a Styled Components és az EmotionJS.

Részletezzük ezeket.

Stílusú alkatrészek és érzelemJS!

A Styled Components érkezett először, és ez kétségkívül erősen befolyásolta az EmotionJS-t.

A Styled Components egyszerű, kicsi React komponens. A komponens kellékeinek függvényében definiálnak egy HTML tag-et és annak stílusait.

Ez elkülöníti a HTML és a CSS szemantikáját a funkcionálisabb React komponenseinktől. Ez viszont olvashatóbb és fenntarthatóbb fejlesztési élményt nyújt.

Stílusú alkatrészek példa:

Amit itt látunk, az egy HTML gomb néhány CSS kellékkel.

A colorés a backgroundCSS tulajdonságokat egy primarytámasz függvényében határozzuk meg, amelyet továbbítunk (vagy sem) az összetevőnek.

Figyelje meg, hogy a JSX nagyon egyszerű és szemantikus, és a CSS és a HTML rész el van különítve a stílusú összetevőtől.

Most nézzük az EmotionJS-t.

EmotionJSkihasználja a stílusos alkatrészek erejét, és további hasznos funkciókat kínál (és egyben a legmenőbb logót is).

Bemutassuk azokat a dolgokat, amelyekről azt gondoltam, hogy a leghatásosabbak az EmotionJS segítségével.

Egy dolgot, amit eddig utáltam, a CSS média lekérdezéseinek fenntartása volt.

Az egyes töréspontok CSS-szabályai a CSS-fájlok különböző területein találhatók. Nehéz volt átlátni és kezelni az átfedő tulajdonságokat.

Az EmotionJS alkalmazásban a Facepaint könyvtár segítségével állandó értéket hozhatunk létre a töréspont szélességeink megtartásával.

Ezután hivatkozhatunk erre az állandóra, deklarálva az egyes töréspontok CSS tulajdonságának értékeit egy helyen.

Bontjuk le ezt a példát:

  • 4-9. Sor: meghatározzuk töréspont-szélességeinket, egy helyen az alkalmazásunkban
  • 13–23. Sor: meghatározunk egy Button komponenst, amely egy div tag, néhány CSS tulajdonsággal. Az értékeket widthés az heightértékeket értéktömbként definiálják, mindegyik törésponthoz egyet. Figyelje meg, hogy nincs szükségünk az pxegységek megadására . Automatikusan hozzáadódnak. Figyelje meg azt is, hogy az background-coloringatlan függ primarya Button komponens támasztól. Ez hasonló a Styled components példához.
  • 26–33. Sor: a React komponensünkben hivatkozunk az EmotionJS gombra, és JSX címkeként használjuk

Az EmotionJS egyéb jellemzői

Az EmotionJS-nek van még néhány módja e képességek némelyikének elérésére:

  • A CSS-javaslat - a React-összetevőinket CSS-támaszokkal tudjuk ellátni, amely egy JavaScript-objektum vagy karakterlánc, amely meghatározza a CSS-tulajdonságokat.
  • A média lekérdezések a CSS prop megközelítéssel is megcélozhatók

Befejezésül: a jó, a rossz és az érzelmi

Előnyök:

  • Könnyen integrálható és cserélhető más CSS megoldásokkal.
  • Könnyen azonosítható és eltávolítható az elhalt kód a többi megoldáshoz képest.
  • Könnyebb a média lekérdezésekkel dolgozni, az értékeket összegyűjtjük.
  • A reakt komponensek szemantikussá válnak, mivel a HTML és a CSS elszigetelt.

Hátrányok:

  • A CSS-modulokkal könnyen megértheti, hogy a böngészőben történő ellenőrzés során pontosan honnan származik a CSS-szabály. Ennek oka, hogy az osztálynevek a React összetevőnév előtagokkal jönnek létre. Az EmotionJS segítségével ez nem történik meg.
  • Ha egy média lekérdezéshez meghatározunk egy CSS tulajdonságot, akkor azt meg kell határoznunk a többire is, mivel értéktömböt adunk meg. Sok esetben csak egy vagy két média lekérdezést szeretnénk megválaszolni, és a többit hagyjuk alapértelmezett értékként.

Az ítélet

Az EmotionJS a következő lépés a helyes irányba, foglalkozva a CSS buktatóival. Elszigetelt, karbantartható környezetet biztosít, fő alkotóelemeinket logikai központúvá és szemantikussá téve.

Szó szerint tíz percbe telt, mire megtanultam és integráltam, és ez jelentős előrelépés ezen a területen.

Ne felejtsen el tapsolni, ha tetszett, és kövessen engem a Twitteren: //twitter.com/shahar_taite