Pridružio mi se Dustin Schau u ovom videu i on će me povesti u obilazak svijeta onoga što je postalo poznato kao CSS-in-JS. Odnosno, svoj styling radite u potpunosti u JavaScript-u, a ne u .cssdatotekama koje sami sebi postavljate u glavu.
Dustin je savršen vodič za to, jer je stvorio izvrstan istraživački alat nazvan CSS u JS Playgroundu, a također ima i potpuno novi tečaj na tu temu.
Ako vas zanima zašto bi nekoga uopće zanimalo ići CSS-in-JS rutom, evo nekoliko razloga o kojima razgovaramo u videu:
- Eliminacija mrtvog koda. Učitavaju se samo stilovi za stilove komponenata koje se koriste u bilo kojem trenutku. Nema otpreme neiskorištenih stilova. Kad komponenta umre, umiru i njezini stilovi.
- Opseg. Pisanje novih stilova ne može utjecati na bilo što drugo na drugim mjestima na web mjestu, tako da ne trebate brinuti o pisanju stila koji ima loše ili nenamjerne posljedice negdje drugdje zbog selektora u globalnom opsegu. Zaštitu opsega dobivamo ideologijama imenovanja poput BEM-a, ali to se ne primjenjuje na alatima.
- Imenovanje bez brige. U nekim slučajevima nema potrebe za odabirom naziva klase ili ID-a za ono što se stilizira jer izlaz sadrži UI.
- Ergonomija programera. Može biti lijepo imati stilove u istoj datoteci (ili na neki drugi način vrlo blizu) same komponente. Na isti se način neki programeri osjećaju vrlo ugodno u JSX-u. Također mogućnost oblikovanja stvari bez ikakve brige zbog opsega znači da se programeri mogu osjećati osnaženima za styling, a ne zastrašivati ih.
- Sustav dizajna prilagođen. Sustavi dizajna su sve o komponentama, pa tako i React. Ti se komplementarni načini razmišljanja prilično dobro podudaraju.
- Mogućnosti JavaScript-a u CSS-u. Radeći to s logičkim operatorima i prosljeđenim vrijednostima i matematikom i što već, korisno je imati punu snagu JavaScript-a u stilovima.
I to nije sve, ali možete shvatiti zašto je to nekim ljudima privlačno. Svakako je potaknuo puno rasprava. Zašto ne kad nudi sve te pogodnosti? Pa, to je vrlo različito razvojno okruženje koje ne mora nužno kliknuti sa svima. Potrebno je savijanje web platforme da bi se učinile pomalo neobične stvari, a to dolazi s bradavicama. Da ne spominjem da postoji doslovan trošak (veličina paketa i slično) koji korisnici plaćaju, a za koji biste se nadali da se plaća efikasnošću.
Dustin je otišao toliko daleko da je izradio demo pomoću Sass-a za oblikovanje stvari kako bi ga usporedio sa načinom na koji se to može učiniti sa CSS-in-JS, koji pokazuje kako izgleda prenošenje stilova, kao i mogućnosti izvođenja.