Selles videos liitub minuga Dustin Schau ja ta viib mind ringkäigule maailmas, mida on hakatud nimetama CSS-in-JS-iks. See tähendab, et teete oma stiili täielikult JavaScripti, mitte .cssfailidena, mis teil kõigil peas on.
Dustin on selleks ideaalne juhend, kuna ta lõi JS Playgroundis suurepärase uurimisvahendi CSS ja tal on ka sellel teemal täiesti uus kursus.
Kui olete uudishimulik, miks keegi oleks üldse huvitatud CSS-in-JS marsruudist, siis siin on mõned põhjused, mida me videos arutame:
- Surnud koodi kõrvaldamine. Ainsad laaditavad stiilid on igal ajahetkel kasutatavad komponendid. Kasutamata stiile ei saadeta. Kui komponent sureb, siis ka selle stiilid.
- Reguleerimisala. Uute stiilide kirjutamine ei saa saidi muudes kohtades midagi muud mõjutada, nii et pole vaja muretseda sellise stiili kirjutamise pärast, millel on mujal halva või soovimatu tagajärg globaalse ulatusega valija tõttu. Saame ulatuskaitse selliste ideoloogiate nimetamisega nagu BEM, kuid seda ei rakendata tööriistade abil.
- Murevaba nimetamine. Mõnel juhul pole stiili jaoks vaja valida klassi nime ega ID-d, kuna väljund sisaldab kasutajaliidest.
- Arendaja ergonoomika. Võib olla tore, kui stiilid asuvad samas failis (või muul viisil komponendi enda lähedal). Samamoodi tunnevad mõned arendajad end JSX-is väga mugavalt. Asjade kujundamine ilma igasuguse ulatuseta muretsemiseta tähendab, et arendajad võivad end stiiliga seoses pigem tunda võimatuna kui hirmutada.
- Disainisüsteem sõbralik. Disainisüsteemid on seotud komponentidega ja nii on ka React. Need üksteist täiendavad mõtteviisid joonduvad üksteisega üsna hästi.
- JavaScripti võimalused CSS-is. Selle tegemine loogiliste operaatoritega ning väärtuste ja matemaatika ja muu järgi edastamine, on JavaScripti täieliku jõu omamine stiilides palju kasu.
Ja see pole veel kõik, kuid näete, miks see on mõne inimese jaoks veenev. See on kindlasti inspireerinud palju arutelusid. Miks mitte, kui see pakub kõiki neid eeliseid? Noh, see on väga erinev arengukeskkond, mis ei pruugi kõigiga klõpsata. Mõnevõrra ebatavaliste asjade tegemiseks on vaja veebiplatvormi painutada ja see tuleb koos tüükadega. Rääkimata sellest, et selle eest maksavad sõnasõnalised kulud (pakettide suurus ja muu), mille tasuksite loodetavasti tõhusamalt.
Dustin jõudis nii kaugele, et ehitas Sassi abil asjade kujundamiseks demo, et võrrelda seda sellega, kuidas seda saab teha CSS-in-JS-iga, mis näitab nii stiilide teisaldamise väljanägemist kui ka selle tegemise võimalusi.