Jag får sällskap av Dustin Schau i den här videon och han ska ta mig med på en rundtur i världen av vad som har blivit känt som CSS-in-JS. Det är att göra din styling helt i JavaScript, snarare än i .cssfiler som du uppe i huvudet helt på egen hand.
Dustin är en perfekt guide för detta, eftersom han skapade ett fantastiskt utforskande verktyg som heter CSS i JS Playground och också har en helt ny kurs i ämnet.
Om du är nyfiken på varför någon skulle vara intresserad av att gå CSS-in-JS-vägen alls, här är några skäl som vi diskuterar i videon:
- Död kod eliminering. De enda stilar som laddas är stilarna för de komponenter som används vid en given tidpunkt. Det finns ingen frakt några oanvända stilar. När en komponent dör, så gör dess stilar också.
- Scoping. Att skriva nya stilar kan inte påverka något annat på andra platser på webbplatsen, så det finns ingen anledning att oroa sig för att skriva en stil som har dåliga eller oavsiktliga konsekvenser någon annanstans på grund av en väljare i det globala området. Vi får omfattningsskydd med namngeologier som BEM, men det verkställs inte med verktyg.
- Oroande namn. I vissa fall finns det inget behov av att välja ett klassnamn eller ID för vad som utformas eftersom utdata innehåller UI.
- Utvecklare ergonomi. Det kan vara trevligt att ha stilar i samma fil (eller på annat sätt mycket nära) själva komponenten. På samma sätt känner vissa utvecklare sig mycket bekväma i JSX. Att också kunna utforma saker utan att oroa sig över allt betyder att utvecklare kan känna sig bemyndigade om styling snarare än skrämmas av den.
- Designsystemvänligt. Designingssystem handlar om komponenter och React är det också. Dessa kompletterande tankesätt passar ganska bra med varandra.
- Möjligheter till JavaScript i CSS. Att göra detta med logiska operatorer och skickas i värden och matematik och vad som helst, det är mycket användbart att ha JavaScript fullt i stilar.
Och det är inte allt, men du kan se varför det är övertygande för vissa människor. Det har verkligen inspirerat till massor av diskussioner. Varför inte när det erbjuder alla dessa fördelar? Det är en helt annan utvecklingsmiljö som inte nödvändigtvis klickar med alla. Det kräver att man böjer webbplattformen för att göra något ovanliga saker och det kommer med vårtor. För att inte tala om det finns en bokstavlig kostnad för det (paketstorlekar och liknande) som användarna betalar för, vilket du bättre hoppas betalar för sig själv med effektivitet.
Dustin gick så långt som att bygga ut en demo med Sass för att utforma saker för att jämföra det med hur det kan göras med CSS-in-JS, vilket visar hur portningsstilar ser ut samt möjligheterna att göra det.