Jeg får følgeskab af Dustin Schau i denne video, og han vil tage mig med på en rundtur i verdenen af det, der er blevet kendt som CSS-in-JS. Det vil sige at gøre din styling helt i JavaScript, snarere end i .cssfiler, som du op i hovedet helt alene.
Dustin er en perfekt guide til dette, da han skabte et fantastisk efterforskningsværktøj kaldet CSS i JS Playground og også har et helt nyt kursus om emnet.
Hvis du er nysgerrig over, hvorfor nogen overhovedet vil være interesseret i at gå CSS-in-JS-ruten, er der nogle grunde, vi diskuterer i videoen:
- Eliminering af dead code. De eneste typografier, der er indlæst, er typografierne for de komponenter, der er i brug til enhver tid. Der er ingen forsendelse af ubrugte stilarter. Når en komponent dør, gør dens stilarter det også.
- Scoping. Skrivning af nye stilarter kan ikke påvirke noget andet andre steder på webstedet, så der er ingen grund til at bekymre sig om at skrive en stil, der har dårlige eller utilsigtede konsekvenser andetsteds på grund af en vælger i det globale omfang. Vi får omfangsbeskyttelse med navngivende ideologier som BEM, men det håndhæves ikke med værktøj.
- Bekymringsfri navngivning. I nogle tilfælde er der ikke behov for at vælge et klassenavn eller ID til, hvad der bliver stylet, da output er indeholdt UI.
- Udviklerergonomi. Det kan være rart at have stilarter i den samme fil (eller på anden måde meget tæt på) selve komponenten. På samme måde føler nogle udviklere sig meget komfortable i JSX. At være i stand til at style ting uden nogen form for bekymring betyder, at udviklere måske føler sig bemyndiget til styling snarere end skræmt af det.
- Designsystemvenligt. Designingssystemer handler om komponenter, og det samme gælder React. Disse supplerende tænkemåder passer godt sammen.
- Muligheder for JavaScript i CSS. At gøre dette med logiske operatorer og videregivet i værdier og matematik og hvad der ikke er, at have den fulde kraft af JavaScript i stilarter er meget nyttigt.
Og det er ikke alt, men du kan se, hvorfor det er overbevisende for nogle mennesker. Det har bestemt inspireret til masser af diskussioner. Hvorfor ikke når det giver alle disse fordele? Nå, det er et meget andet udviklingsmiljø, der ikke nødvendigvis klikker med alle. Det kræver bøjning af webplatformen for at gøre noget usædvanlige ting, og det kommer med vorter. For ikke at nævne er der en bogstavelig pris for det (størrelse på pakker og sådan), som brugerne betaler for, hvilket du bedre håber betaler for sig selv med effektivitet.
Dustin gik så langt som at opbygge en demo ved hjælp af Sass til at style ting for at sammenligne det med, hvordan det kan gøres med CSS-in-JS, hvilket viser, hvordan portingstile ser ud samt mulighederne for at gøre det.