CSS-in-JS

CSS-in-JS on tehnoloogia veebilehtede kujundamiseks kasutatava keele CSS kirjutamiseks programmeerimiskeeles JavaScript. Tegemist on tehnikaga, mis toetab tänapäevases veebiarenduses laialt levinud modulaarsuse, ehk veebilehe osadeks (ehk komponentideks) jaotamise põhimõtet. CSS loodi algselt staatiliste veebidokumentide küljendamiseks. Terve leht kujundati ühe suure osana ja mooduliteks jaotamise vajadust ei eksisteerinud. Võrreldes algusaegadega on veebisaitide ülesehitus muutunud oluliselt keerukamaks, mis on kaasa toonud sellega kaasnevate probleemide ohjamiseks mõeldud metoodikate väljatöötamise. Front-end arendajad on loonud erinevaid tehnikaid nagu BEM, Atomic CSS, OOCSS, SMACSS, ITCSS, jt. Niisuguste tavade omaks võtmine ja järjekindel kasutamine ei ole aga lihtne, eriti kui ühe koodibaasi kallal töötavad mitmed inimesed läbi aastate. Lisaks stiilifailide haldamiseks loodud metoodikatele on välja töötatud eeltöötlejad nagu Sass ja Less, samuti JavaScript'i abil CSS'i töötlemiseks mõeldud PostCSS. CSS-in-JS teegid on järgmine samm selles evolutsioonis. 2014. a. novembris tutvustas Facebooki tarkvaraarendaja Christopher Chedeau NationJS konverentsil uuenduslikku kontsepti, mis on nüüdseks tuntud kui CSS-in-JS. CSS on mõeldud kasutamiseks globaalselt ehk kogu veebilehe üleselt, mis raskendab suuremahuliste veebirakenduste puhul kujunduselementide spetsiifilisuse rakendamist, ning suurendab stiilide kokku langemise ja ülekirjutamise riski. CSS-in-JS teegid ongi loodud peamiselt selle laialt levinud probleemi lahendamiseks, tuues endaga vaikimisi kaasa komponendi-põhise skoobi, mis välistab stiilide kokku langemise ja vähendab suuresti globaalse CSS'iga kaasnevaid ootamatusi. Komponentide kapseldatavus hõlbustab koodibaasi ülalpidamist ja kõrvaldab suure osa vigadest, kuna tarkvaraarendaja saab olla kindel, et ühes komponendis muudatusi tehes, ei muuda ta kujundust veebisaidi teises osas. Taoline rakenduse komponentideks jaotamine on kasuks modulaarsusele ja taaskasutatavusele. Programmeerimiskeele JavaScript kasutamine annab kujundusfailide kirjutamisele juurde kuhjaga dünaamilisi võimalusi modernsete mitmeotstarbeliste kasutajaliideste loomiseks. CSS-in-JS tehnoloogiaga kaasneb teatud õppimiskõver, sest lisaks uuele süntaksile tuleb omandada uus mõtteviis, mis põhineb komponendi-põhistel raamistikel, millega koos peamiselt CSS-in-JS teeke kasutatakse. Varasema komponentide-põhise arendusprotsessi kogemuse puudumisel võib harjumine olla aeganõudev. Lisaks ei pruugi CSS-in-JS olla lihtsakoeliste veebiprojektide puhul vajalik ja lisab tarbetu lisakihi kasutatavate tehnoloogiate sekka. Erinevad CSS-in-JS teegid on kasuks veebiarendusprojektide erinevate aspektide parendamise poolest nagu koodibaasi suurus, jõudlus, kohaldatavus, arendajakogemus, jms. Kõige laialdasemalt leiavad kasutust arenduseks kasutatavast raamistikust mitte olenevad styled-components ja Emotion. S.t., et neid teeke on võimalik kasutada ilma raamistikuta puhta JavaScript'i baasil või mistahes komponendi-põhise raamistikuga tarkvaraarendaja valikul. Lisaks eksisteerivad raamistiku-spetsiifilised teegid (styled-jsx), mis toetavad vaid kindla raamistiku süntaksit. Populaarsemate teekide hulka kuuluvad veel JSS, Linaria, Fela, Aphrodite, Styletron, Radium, nano-css, Stitches. Isonen O. ,,What actually is CSS-in-JS?”, DailyJS, 2019 Monus A. ,,An Introduction to CSS-in-JS: Examples, Pros, and Cons", Envato Tuts+, 2019 Ward D. ,,A Brief History of CSS-in-JS: How We Got Here and Where We’re Going", gitconnected, 2017 Saravanan A. ,,Exploring the new age CSS-in-JS libraries", 2020