Jeg får selskap av Dustin Schau i denne videoen, og han kommer til å ta meg med på en omvisning i verden av det som har blitt kjent som CSS-in-JS. Det vil si å gjøre stylingen din helt i JavaScript, snarere enn i .cssfiler som du oppe i hodet helt alene.
Dustin er en perfekt guide for dette, da han laget et flott utforskende verktøy kalt CSS i JS Playground, og har også et helt nytt kurs om emnet.
Hvis du er nysgjerrig på hvorfor noen ville være interessert i å gå CSS-in-JS-ruten i det hele tatt, er det noen grunner til at vi diskuterer i videoen:
- Eliminering av død kode. De eneste stilene som er lastet inn er stilene til komponentene som brukes til enhver tid. Det er ingen frakt noen ubrukte stiler. Når en komponent dør, gjør også stilene det.
- Omfang. Å skrive nye stiler kan ikke påvirke noe annet andre steder på nettstedet, så det er ikke nødvendig å bekymre seg for å skrive en stil som har dårlige eller utilsiktede konsekvenser andre steder på grunn av en velger i det globale omfanget. Vi får omfangsbeskyttelse med navngivende ideologier som BEM, men det håndheves ikke med verktøy.
- Bekymringsfri navngivning. I noen tilfeller er det ikke nødvendig å velge et klassenavn eller ID for det som blir stylet siden utdataene inneholder UI.
- Utviklerergonomi. Det kan være fint å ha stiler i samme fil (eller ellers veldig nær) selve komponenten. På samme måte føler noen utviklere seg veldig komfortable i JSX. Å være i stand til å utforme ting uten å være bekymret for et omfang betyr at utviklere kan føle seg bemyndiget til styling i stedet for å skremme av det.
- Design systemvennlig. Design-systemer handler om komponenter, og det samme er React. Disse komplementære tenkemåtene stemmer godt overens med hverandre.
- Muligheter for JavaScript i CSS. Å gjøre dette med logiske operatører og overført i verdier og matematikk og hva ikke, å ha full kraft av JavaScript i stiler er veldig nyttig.
Og det er ikke alt, men du kan se hvorfor det er overbevisende for noen mennesker. Det har absolutt inspirert til mye diskusjon. Hvorfor ikke når det gir alle disse fordelene? Vel, det er et veldig annet utviklingsmiljø som ikke nødvendigvis klikker med alle. Det krever å bøye webplattformen for å gjøre noe uvanlige ting, og det følger med vorter. For ikke å nevne at det er en bokstavelig kostnad for det (størrelsen på pakker og slikt) som brukerne betaler for, som du bedre håper betaler for seg selv med effektivitet.
Dustin gikk så langt som å bygge ut en demo ved hjelp av Sass for å style ting for å sammenligne det med hvordan det kan gjøres med CSS-in-JS, som viser hvordan portingstiler ser ut, samt mulighetene for å gjøre det.