V tem videu se mi pridruži Dustin Schau, ki me bo popeljal na ogled sveta, ki je postal znan kot CSS-in-JS. To pomeni, da v celoti izdelate svoj slog v JavaScriptu, ne pa v .cssdatotekah, ki ste si jih sami zamislili.
Dustin je popoln vodnik za to, saj je v JS Playground ustvaril odlično raziskovalno orodje, imenovano CSS, in ima tudi povsem nov tečaj na to temo.
Če vas zanima, zakaj bi koga sploh zanimalo pot CSS-in-JS, v videoposnetku razpravljamo o nekaj razlogih:
- Odprava mrtve kode. Edini slogi, ki se naložijo, so slogi komponent, ki so v danem trenutku v uporabi. Ni neuporabljenih stilov. Ko komponenta umre, umrejo tudi njeni slogi.
- Obseg. Pisanje novih slogov ne more vplivati na nič drugega na drugih mestih spletnega mesta, zato vam ni treba skrbeti, ali boste zaradi izbirnika v globalnem obsegu drugje napisali slog, ki ima slabe ali neželene posledice. Zaščito obsega dobimo z ideologijami poimenovanja, kot je BEM, vendar to ni potrebno zaradi orodja.
- Brezskrbno poimenovanje. V nekaterih primerih ni treba izbrati imena razreda ali ID-ja za tisto, kar je oblikovano, saj izhod vsebuje uporabniški vmesnik.
- Ergonomija razvijalca. Lahko je lepo imeti sloge v isti datoteki (ali kako drugače zelo blizu) same komponente. Na enak način se nekateri razvijalci v JSX počutijo zelo prijetno. Tudi če lahko stvari oblikujete brez kakršnih koli pomislekov glede obsega, se razvijalci morda počutijo bolj pooblaščene za oblikovanje, namesto da bi jih ustrašili.
- Sistemu prijazen do oblikovanja. Sistemi za načrtovanje so sestavni del komponent, prav tako React. Ti komplementarni načini razmišljanja se precej dobro ujemajo.
- Možnosti JavaScript v CSS. Če to počnete z logičnimi operatorji ter posredujete vrednosti in matematiko in še kaj, je polna moč JavaScripta v slogih zelo koristna.
In to še ni vse, vendar lahko vidite, zakaj je nekatere ljudi prepričljivo. Vsekakor je spodbudil veliko razprav. Zakaj ne, ko ponuja vse te ugodnosti? No, gre za zelo drugačno razvojno okolje, ki ni nujno, da klikne z vsemi. Zahteva upogibanje spletne platforme, da počne nekoliko nenavadne stvari, ki prihajajo z bradavicami. Da ne omenjam, da gre za dobesedne stroške (velikost paketov in podobno), ki jih plačajo uporabniki, za katere raje upate, da se splačajo z učinkovitostjo.
Dustin je šel tako daleč, da je z uporabo Sass ustvaril predstavitev za oblikovanje stvari, da jo primerja s tem, kako je to mogoče storiti s CSS-in-JS, ki prikazuje, kako izgleda prenos stilov in možnosti za to.