Tyylitys Reactissa

Kirjoitin vuonna 2016 blogipostauksen CSS:n historiasta ja tulevaisuudesta. Pohdiskelen plokautuksen lopussa sitä, miten CSS istuu Reactiin, ja kuuluuko tulevaisuus JavaScript- vai CSS-pohjaiselle CSS:lle.

Viimeksi tänään pohdin ihan samaa kysymystä, enkä juuri ole seitsemässä vuodessa päässyt eteenpäin. Styled Components, Emotion ja muut ajonaikaiset tyylikirjastot tuntuivat tavallaan hyviltä, mutta vain puoliksi, ja ne osoittautuivat ansaksi anti-hydraatio-liikkeen aikakaudella.

Tyylittäminen paljailla CSS-moduleilla on paljon parempi vaihtoehto kuin vuonna 2016, koska CSS alustana on kehittynyt niin paljon. PostCSS:llä ja kumppaneilla on silti edelleen paikkansa. Ylipäätään CSS-lähtöinen tapa tuntuu aina toimivan ilman säätöä, mutta sitten toisaalta, tyyppiturvallisuus puuttuu.

Tailwind ei ole koskaan herättänyt itsessäni wau-efektiä, mutta pitäisi joskus sukeltaa siihen, että osaisin viisastella paremmin.

Joulukalenteri on tyylitelty Vanilla Extract-kirjastolla, joka edustaa runtimettömiä CSS-in-JS-tunkkeja. Tämä maailma pyrkii yhdistämään CSS:n ja TypeScriptin parhaat puolet, ja vetoaa meikäläiseen ajatuksellisesti. Lisätunkkaukselta ja buildiputkien säädöltä ei kyllä välty.

Kalenteriluukkua ajatellen sopivasti Meta julkaisi juuri äsken samaa ideologiaa edustavan StyleX-kirjaston, jonka otan heti kokeiluun. Jos se riittää Facebookille ja Instagramille ja Whatsappille, se varmaankin riittää minulle. PandaCSS on kolmas vaihtoehto tästä koulukunnasta.

Eksoottisempaa vaihtoehtoa kaipaaville julkaistiin ihan hetki sitten CSS Hooks, johon en siihenkään ole ehtinyt vielä syventyä. Aion kyllä, ihan näillä näppäimillä.