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.
Motivatsioon[muuda | muuda lähteteksti]
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. [1] 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 arendatud erinevad 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. [2] 2014. a. novembris tutvustas Facebook'i tarkvaraarendaja Christopher Chedeau NationJS konverentsil uuenduslikku kontsepti, mis on nüüdseks tuntud kui CSS-in-JS. [3]
Plussid[muuda | muuda lähteteksti]
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 multifunktsionaalsete kasutajaliideste loomiseks. [2]
Miinused[muuda | muuda lähteteksti]
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. [2]
Teegid[muuda | muuda lähteteksti]
Erinevad CSS-in-JS teegid on kasuks veebiarendusprojektide erinevate aspektide parendamise poolest nagu koodibaasi suurus, jõudlus, kohaldatavus, arendajakogemus, jms. [4] 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. [2] Populaarsemate teekide hulka kuuluvad veel JSS, Linaria, Fela, Aphrodite, Styletron, Radium, nano-css, Stitches.
Viited[muuda | muuda lähteteksti]
- ↑ Isonen O. ,,What actually is CSS-in-JS?”, DailyJS, 2019
- ↑ 2,0 2,1 2,2 2,3 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