Lær EmotionJS under din morgenkaffe - det er så let.

EmotionJS er et CSS-in-JavaScript-bibliotek med utrolige muligheder. Lad os se, hvordan CSS-verdenen udviklede sig til denne løsning, og dykk derefter dybt ned i, hvad du kan gøre med den i dag.

CSS-krigene (et resumé)

I de sidste par år har vi set en overgang til forskellige typer stylingmetoder, alt baseret på CSS. Her er kernen i kronologisk rækkefølge:

Almindelig gammel CSS

Dette er den klassiske og enkle måde at anvende CSS på. Vi refererer til en CSS-fil i vores index.html, og den anvendes på vores HTML-filer ved klassiske CSS-regler.

Denne tilgang har problemer, når den anvendes i stor skala, da CSS er baseret på specificitet, der skal håndteres forsigtigt, hvis vi vil forhindre CSS-kollisioner.

Det er også svært at debugge, når du inspicerer i browseren. Det er svært at forstå, hvilken kombination af CSS-egenskaber, der endte med at påvirke den stil, vi ser på et HTML-tag.

CSS præprocessorer

Almindelig gammel CSS havde nogle begrænsninger og fødte nogle udvidelser af CSS som Less og Sass. Disse sprogudvidelser giver os mulighed for at skrive på et sprog med stærkere muligheder. Eksempler inkluderer indlejring af CSS-vælger, funktioner og mere. Vores build-værktøj kompilerer disse filer til enkle CSS-filer, og de anvendes på en almindelig måde.

CSS-moduler

Denne tilgang blev introduceret, når webudvikling begyndte at behandle websider som komponenter af komponenter. CSS-moduler handler om at style en komponent uafhængigt, ikke påvirke andre dele af brugergrænsefladen og ikke blive påvirket af dem.

Efter introduktion af CSS-moduler i vores projekt henviser hver komponent til en CSS-fil med almindelig eller forbehandlet CSS. Under byggeprocessen tager vores byggesystem (f.eks. Webpack) hver CSS-klasse, præfikser den med komponentens navn og efterfølger den med en unik identifikator, så klassen er unik.

Denne tilgang er fantastisk, da det er meget let at opnå CSS-isolering. Det er også let at forstå, hvilke CSS-regler der blev anvendt på vores HTML-elementer, og hvor de stammer fra. Jeg har været en stor fortaler for denne tilgang - indtil EmotionJS blev frigivet.

CSS-i-JS

Denne tilgang udfordrer praksis med at isolere CSS i CSS-filer. Det giver os mulighed for at angive vores CSS-regler i vores JavaScript-kode som JS-objekter.

Nogle rammer såsom Reacthar indbygget support til denne metode. Et par biblioteker opstod fra behovet for at give en mere isoleret og skalerbar løsning. De øverste biblioteker er Styled Components og EmotionJS.

Lad os uddybe disse.

Stylede komponenter versus EmotionJS!

Stylede komponenter ankom først, og EmotionJS var ganske vist stærkt påvirket af det.

Stylede komponenter er enkle, små React-komponenter. De definerer et HTML-tag og dets stilarter som en funktion af komponentens rekvisitter.

Dette isolerer HTML- og CSS-semantikken fra vores mere funktionelle React-komponenter. Dette giver igen en mere læselig og vedligeholdelig udviklingsoplevelse.

Eksempler på designede komponenter:

Hvad vi ser her er en HTML-knap med nogle CSS-rekvisitter.

Egenskaberne colorog backgroundCSS bestemmes som en funktion af en primaryprop, der overføres (eller ej) til komponenten.

Bemærk, hvordan JSX er meget enkel og semantisk, og CSS- og HTML-delen er isoleret i den stilede komponent.

Lad os nu se på EmotionJS.

FølelseJStager kraften fra designede komponenter og tilføjer nogle mere nyttige funktioner (og også det sejeste logo nogensinde).

Lad os demonstrere de ting, jeg syntes var mest imponerende med EmotionJS.

En ting, jeg hidtil hadede, var at opretholde CSS-medieforespørgsler.

CSS-reglerne for hvert brudpunkt befandt sig i forskellige områder af CSS-filerne. Det var svært at se og håndtere de overlappende egenskaber.

I EmotionJS kan vi skabe en konstant, der holder vores brydepunktsbredder ved hjælp af Facepaint-biblioteket.

Vi kan derefter henvise til denne konstant ved at erklære værdierne for en CSS-egenskab for hvert breakpoint ét sted.

Lad os nedbryde dette eksempel:

  • Linie 4-9: Vi definerer vores brydepunktsbredder ét sted i vores applikation
  • Linie 13–23: vi definerer en knapkomponent, der er et div-tag med nogle CSS-egenskaber. Dens widthog heightværdier er defineret som en række værdier, en for hvert breakpoint. Bemærk, hvordan vi ikke behøver at specificere pxenhederne. De tilføjes automatisk. Bemærk også, at background-colorejendommen er afhængig af den primaryprop, der leveres til Button-komponenten. Dette svarer til eksemplet med Stylede komponenter.
  • Linie 26–33: i vores React-komponent henviser vi til vores EmotionJS-knap og bruger den som et JSX-tag

Andre funktioner i EmotionJS

EmotionJS har nogle flere måder at opnå nogle af disse muligheder på:

  • CSS-prop - vi kan tilbyde vores React-komponenter en CSS-prop, der er et JavaScript-objekt eller en streng, der definerer vores CSS-egenskaber.
  • Medieforespørgsler kan også målrettes med CSS-prop-tilgangen

Afslutningsvis: det gode, det dårlige og det følelsesmæssige

Fordele:

  • Let at integrere og udskifte andre CSS-løsninger.
  • Let at identificere og fjerne død kode sammenlignet med andre løsninger.
  • Lettere at arbejde med medieforespørgsler, værdier samles.
  • Reaktionskomponenter bliver mere semantiske, når HTML og CSS isoleres.

Ulemper:

  • Med CSS-moduler er det let at forstå nøjagtigt, hvor CSS-reglen kommer fra, når man inspicerer i browseren. Dette skyldes, at klassenavne genereres med præfikser for React-komponentnavne. Med EmotionJS sker dette ikke.
  • Hvis vi definerer en CSS-egenskab for en medieforespørgsel, skal vi også definere den for resten, da vi leverer en række værdier. I mange tilfælde vil vi bare adressere en eller to medieforespørgsler og lade de andre være standardværdien.

Dommen

EmotionJS er det næste skridt i den rigtige retning, der beskæftiger sig med faldgruber i CSS. Det giver et isoleret, vedligeholdeligt miljø, der holder vores hovedkomponenter logisk centreret og semantisk.

Det tog bogstaveligt talt ti minutter at lære og integrere det, og det er en stor forbedring på dette område.

Glem ikke at klappe, hvis du kunne lide dette, og følg mig på Twitter: //twitter.com/shahar_taite