Minulle liittyy Dustin Schau tässä videossa ja hän aikoo viedä minut kiertueelle maailmasta, joka on tullut tunnetuksi nimellä CSS-in-JS. Toisin sanoen, muotoilun tekeminen kokonaan JavaScriptiä, eikä .csstiedostoja, jotka olet itse päähän.
Dustin on täydellinen opas tähän, kun hän loi upean etsintätyökalun nimeltä CSS JS Playgroundissa, ja hänellä on myös upouusi kurssi aiheesta.
Jos olet utelias, miksi kukaan olisi kiinnostunut menemään CSS-in-JS -reitillä ollenkaan, tässä on joitain syitä, joista keskustelemme videossa:
- Koodin poistaminen. Ainoat ladatut tyylit ovat kulloinkin käytössä olevien komponenttien tyylit. Käyttämättömiä tyylejä ei lähetetä. Kun komponentti kuolee, niin sen tyylitkin.
- Soveltamisala. Uusien tyylien kirjoittaminen ei voi vaikuttaa mihinkään muuhun sivuston muihin paikkoihin, joten ei tarvitse huolehtia tyylin kirjoittamisesta, jolla on huonoja tai tahattomia seurauksia muualla maailmanlaajuisen valitsimen vuoksi. Saamme suojaussuojan nimeämällä ideologioita, kuten BEM, mutta sitä ei valvota työkaluilla.
- Huoleton nimeäminen. Joissakin tapauksissa ei tarvitse valita luokan nimeä tai tunnusta tyylille, koska lähtö sisältää käyttöliittymän.
- Kehittäjän ergonomia. Voi olla mukavaa, että tyylit ovat samassa tiedostossa (tai muuten hyvin lähellä komponenttia). Samalla tavalla jotkut kehittäjät tuntevat olonsa JSX: ssä erittäin mukavaksi. Se, että pystyy myös muotoilemaan asioita ilman mitään huolta, tarkoittaa, että kehittäjät saattavat tuntea olevansa valtuudet muotoiluun eikä pelotella sitä.
- Suunnittelujärjestelmäystävällinen. Suunnittelujärjestelmissä on kyse komponenteista ja niin on myös React. Nämä täydentävät ajattelutavat sopivat melko hyvin toisiinsa.
- JavaScriptin mahdollisuudet CSS: ssä. Tämän tekeminen loogisten operaattoreiden kanssa ja arvojen, matematiikan ja vastaavan välittäminen on JavaScriptin täyden voiman käyttäminen tyylissä.
Eikä siinä kaikki, mutta voit nähdä, miksi se on pakottavaa joillekin ihmisille. Se on varmasti herättänyt paljon keskustelua. Miksi ei, kun se tarjoaa kaikki nämä edut? No, se on hyvin erilainen kehitysympäristö, joka ei välttämättä napsauta kaikkien kanssa. Se vaatii web-alustan taivuttamista tekemään jotenkin epätavallisia asioita, ja tämä tulee syylien mukana. Puhumattakaan siitä, että käyttäjille maksetaan kirjaimelliset kustannukset (pakettikoko ja vastaava), jonka toivot maksavan itsensä tehokkaasti.
Dustin meni niin pitkälle, että rakensi esittelyn Sassin avulla esitystyyliin vertaillakseen sitä siihen, miten se voidaan tehdä CSS-in-JS: llä, mikä osoittaa, kuinka tyylien siirtäminen näyttää sekä mahdollisuudet sen tekemiseen.