Poravnave CSS-a v JS

Fotograf Artem Bali

Pred kratkim sem napisal pregled višje ravni CSS-in-JS in večinoma govoril o težavah, ki jih ta pristop poskuša rešiti. Avtorji knjižnic redko vlagajo čas v opisovanje kompromisov njihove rešitve. Včasih je to zato, ker so preveč pristranski, včasih pa preprosto ne vedo, kako uporabniki orodje uporabljajo. To je poskus opisovanja dosedanjih kompromisov. Mislim, da je pomembno omeniti, da sem avtor JSS, zato bi me morali obravnavati pristransko.

Družbeni vpliv

Obstaja sloj ljudi, ki delajo na spletni platformi in ne poznajo nobenega JavaScript. Ti ljudje dobijo plačilo za pisanje HTML in CSS. CSS-in-JS je močno vplival na potek razvijalcev. Resnično transformativne spremembe ni mogoče nikoli storiti, ne da bi nekateri ostali za seboj. Ne vem, ali mora biti CSS-in-JS edini način, vendar je množično sprejetje jasen znak težav pri uporabi CSS-ja v sodobnih aplikacijah.

Velik del težave predstavlja naša nezmožnost natančnega sporočanja primerov uporabe, ko CSS-in-JS sveti in kako ga pravilno uporabiti za nalogo. Številni navdušenci nad CSS-jem so bili uspešni pri promociji tehnik, vendar ni veliko kritikov govorilo o kompromitih na konstruktiven način, ne da bi pri tem orodje pocenili. Kot rezultat tega smo pustili marsikateri kompromis skrit in si nismo prizadevali, da bi zagotovili razlago in rešitve.

CSS-in-JS je poenostavitev uporabe zapletenih primerov uporabe, zato ga ne potiskajte tam, kjer ni potrebno!

Stroški izvajanja

Ko se CSS v času izvajanja generira iz JavaScripta, je v brskalniku rehenski stroški. Delovni čas se razlikuje od knjižnice do knjižnice. To je dobro splošno merilo, vendar preverite svoje lastne teste. Večje razlike med izvajanjem se pojavijo glede na potrebo po celotnem razdelitvi CSS nizov predloge, količini optimizacij, podrobnosti o implementaciji dinamičnih stilov, algoritmu hashing in stroški integracije okvirja. *

Poleg možnih nadomestnih časov izvajanja morate upoštevati še 4 različne strategije povezovanja, ker nekatere knjižnice CSS-in-JS podpirajo več strategij in uporabnik je odvisen od tega, da jih uporabi. *

Strategija 1: Samo generacija izvajanja

Runtime CSS generacija je tehnika, ki ustvari niz CSS v JavaScript in nato vstavi ta niz s pomočjo slogne oznake v dokument. Ta tehnika ustvari tabelo sloga, NE INLINE stilov.

Kompliciranje izvajanja izvajanja je nezmožnost zagotavljanja stilske vsebine v zgodnji fazi, ko se dokument začne nalagati. Ta pristop običajno ustreza aplikacijam brez vsebine, ki je lahko uporabna takoj. Običajno takšne aplikacije zahtevajo interakcijo uporabnikov, preden lahko uporabniku resnično postanejo koristne. Pogosto takšne aplikacije delujejo z vsebino, ki je tako dinamična, da postane zastarela takoj, ko jo naložite, zato morate zgodaj vzpostaviti cevovod za posodobitve, na primer Twitter. Poleg tega, ko je uporabnik prijavljen, ni treba posredovati HTML-ja za SEO.

Če interakcija zahteva JavaScript, je treba paket naložiti, preden je aplikacija pripravljena. Na primer, lahko prikažete vsebino privzetega kanala, ko naloži Slack v dokumentu, vendar je verjetno, da bo uporabnik želel kanal spremeniti takoj po tem. Če torej naložite začetno vsebino, da jih takoj vržete stran.

Zaznano delovanje takšnih aplikacij je mogoče izboljšati z rezerviranji in drugimi triki, da se aplikacija počuti bolj sprotno, kot je v resnici. Takšne aplikacije so ponavadi podatki težki, zato ne bodo uporabne tako hitro kot članek.

Strategija 2: Generacija izvajanja s kritičnim CSS

Kritičen CSS je minimalna količina CSS, ki je potrebna za slog strani v začetnem stanju. Izdela se z uporabo oznake sloga v glavi dokumenta. Ta tehnika se pogosto uporablja z in brez CSS-in-JS. V obeh primerih boste verjetno podvojili pravila CSS, enkrat kot del kritičnega CSS in enkrat kot del svežnja JavaScript ali CSS. Velikost kritičnega CSS je lahko precej velika, odvisno od količine vsebine. Dokument običajno ne bo predpomnjen.

Brez kritičnega CSS-ja bo morala statična aplikacija z eno samo stranjo z enostavnim programom CSS-in-JS prikazati mesta namesto vsebine. To je slabo, ker bi uporabniku lahko koristilo že veliko prej, izboljšalo dostopnost na nižjih napravah in za povezave z nizko pasovno širino.

S kritičnim CSS je mogoče izvajati CSS med izvajanjem pozneje, ne da bi v začetni fazi blokiral uporabniški vmesnik. Vendar je treba na mobilnih napravah nižjega cenovnega razreda, starih približno 5+ let, generacija CSS iz JavaScript negativno vplivati ​​na zmogljivost. Močno je odvisno od količine ustvarjenega CSS-ja in uporabljene knjižnice, zato ga ni mogoče posploševati.

Komplikacija te strategije je strošek pridobivanja kritičnega CSS in stroški generiranja CSS.

Strategija 3: Samo črpanje časa za gradnjo

Ta strategija je privzeta v spletu brez CSS-in-JS. Nekatere knjižnice CSS v JS vam omogočajo, da v času izdelave izvlečete statični CSS. * V tem primeru ni nobenega nadomestnega izvajanja, CSS se na strani prikaže s pomočjo povezave. Stroški generacije CSS se plačajo enkrat pred časom.

Tu gre za dva večja kompromisa:

  1. Nekaj ​​dinamičnih API-jev, ki jih ponuja CSS-in-JS, med izvajanjem ne morete uporabljati, ker nimate dostopa do države. Pogosto še vedno ne morete uporabljati lastnosti po meri CSS, ker niso podprte v vsakem brskalniku in jih po naravi ni mogoče polniti. V tem primeru boste morali rešiti rešitve za dinamično tematiko in slogovno oblikovanje. *
  2. Brez kritičnega CSS-ja in s praznim predpomnilnikom boste blokirali prvo barvo, dokler se vaš CSS paket ne naloži. Povezavni element v glavi dokumenta blokira upodabljanje HTML-ja.
  3. Neopredeljiva specifičnost s cepljenjem svežnja na podlagi strani v aplikacijah za eno stran. *

Strategija 4: Izdvajanje gradbenega časa s kritičnim CSS

Ta strategija tudi ni edinstvena za CSS-in-JS. Popolna statična ekstrakcija s kritičnim CSS-om zagotavlja najboljše zmogljivosti pri delu s statičnejšo aplikacijo. Ta pristop ima še vedno prej omenjene kompromise statičnega CSS-ja, le da se lahko oznaka blokirne povezave premakne na dno dokumenta.

Obstajajo 4 glavne strategije upodabljanja CSS. Le dva od njih sta značilni za CSS-in-JS in nobeden od njih ne velja za vse knjižnice.

Dostopnost

CSS-in-JS lahko zmanjša dostopnost, če ga uporabljate na napačen način. To se bo zgodilo, ko bo večinoma statična spletna stran implementirana brez Critical CSS extraction, tako da HTML ni mogoče naslikati pred nalaganjem in oceno svežnja JavaScript. To se lahko zgodi tudi, če je ogromna datoteka CSS upodobljena z uporabo oznake za blokiranje povezave v glavi dokumenta, kar je trenutno najbolj priljubljena težava s tradicionalno vdelavo in ni značilna samo za CSS v JS.

Razvijalci morajo prevzeti odgovornost za dostopnost. Še vedno obstaja močna napačna ideja, da je nestabilna internetna povezava problem ekonomsko šibkih držav. Pozabljamo, da imamo težave s povezljivostjo vsak dan, ko vstopimo v podzemni železniški sistem ali v veliko stavbo. Stabilna mobilna povezava brez kabla je mit. Niti enostavno ni stabilne povezave WiFi, na primer, 2,4 GHz WI-FI omrežje lahko dobi motnje iz mikrovalovne pečice!

Stroški kritičnega CSS z upodabljanjem na strani strežnika

Če želimo pridobiti kritično CSS ekstrakcijo za CSS-in-JS, potrebujemo SSR. SSR je postopek generiranja končnega HTML-ja za dano stanje aplikacije na strežniku. Pravzaprav je lahko precej zapleten in drag postopek. Za vsako zahtevo HTTP potrebuje določeno količino ciklov CPU na strežniku.

CSS-in-JS ponavadi izkoristi dejstvo, da je zasidran v cevovod za upodabljanje HTML. * Ve, kaj je bil HTML ustvarjen in kakšen CSS potrebuje, tako da lahko ustvari absolutno minimalno količino tega. Kritični CSS doda dodatne režijske stroške pri upodabljanju HTML na strežniku, ker ga je treba tudi CSS sestaviti v končni niz CSS. V nekaterih scenarijih je težko ali celo nemogoče predpomniti na strežniku.

Črna škatla

Zavedati se morate, kako knjižnica CSS v JS, ki jo uporabljate, upodablja vaš CSS. Na primer, ljudje se pogosto ne zavedajo, kako Styled Components in Emotion izvajata dinamične sloge. Dinamični slogi so skladnja, ki omogoča uporabo funkcij JavaScript znotraj deklaracije vaših slogov. Te funkcije sprejemajo rekvizite in vrnejo blok CSS.

Da bi ohranili skladnost specifičnosti vira, obe zgoraj imenovani knjižnici ustvari novo pravilo CSS, če vsebuje dinamično izjavo in komponento posodablja z novimi rekviziti. Da dokažem, kaj mislim, sem ustvaril ta peskovnik. V JSS smo se odločili za drugačen tradeoff, ki nam omogoča posodobitev dinamičnih lastnosti brez ustvarjanja novih pravil CSS. *

Strma krivulja učenja

Za ljudi, ki poznajo CSS, vendar so novi v JavaScriptu, je začetna količina dela, da pospešimo hitrost CSS-a v JS, precej velika.

Za pisanje CSS-in-JS ni treba biti profesionalni razvijalec JavaScript, dokler se ne vključi zapletena logika. Ne moremo posploševati kompleksnosti stylinga, saj je to res odvisno od primera uporabe. V primerih, ko se CSS-in-JS zaplete, je verjetno, da bi bilo izvajanje z vanilijevim CSS-om še bolj zapleteno.

Za osnovno oblikovanje CSS v JS je treba vedeti, kako deklarirati spremenljivke, kako uporabljati predloge nizov in interpolirati vrednosti JavaScript. Če se uporablja notacija predmetov, je treba vedeti, kako delati s predmeti JavaScript in sintaksi, ki temeljijo na knjižnici. Če gre za dinamično oblikovanje, je treba vedeti, kako uporabljati JavaScript funkcije in pogoje.

Na splošno je krivulja učenja ne moremo zanikati. Ta krivulja učenja običajno ni veliko večja od učenja Sass. Pravzaprav sem ustvaril ta tečaj jajčne glave, da to dokažem.

Brez interoperabilnosti

Večina CSS-in-JS librov ni interoperabilnih. To pomeni, da stilov, napisanih v eni knjižnici, ni mogoče upodobiti z drugo knjižnico. Praktično pomeni, da ne morete preprosto preklapljati celotne aplikacije iz ene izvedbe v drugo. To pomeni tudi, da ne morete preprosto deliti uporabniškega vmesnika na NPM, ne da bi knjižnico CSS-in-JS, ki jo izberete, v potrošniški sveženj vnesli, razen če imate za CSS vgrajeno statično ekstrakcijo.

Začeli smo delati na formatu ISTF, ki naj bi odpravil to težavo, vendar na žalost še nismo imeli časa, da bi jo spravili v stanje, pripravljeno na proizvodnjo. *

Mislim, da je skupna raba komponent okvirnega agnostičnega uporabniškega vmesnika v javni domeni še vedno težko rešljiva težava.

Varnostna tveganja

Z CSS-in-JS je možno uvesti puščanje varnosti. Kot pri vseh programih na strani odjemalca se morate tudi pred upodabljanjem izogniti uporabnikovemu vnosu.

Ta članek vam bo dal več vpogleda in nekaj zmedejočih primerov.

Neberljiva imena razredov

Nekateri še vedno mislijo, da je pomembno, da na spletu hranimo smiselna berljiva imena razredov. Trenutno veliko knjižnic CSS v JS ponuja smiselna imena razredov na podlagi imena deklaracije ali imena komponente v razvojnem načinu. Nekateri od njih celo omogočajo prilagajanje funkcije generatorja imen razreda.

V načinu proizvodnje pa večina od njih ustvari krajša imena za manjše obremenitve. To je kompromis, ki ga mora uporabnik knjižnice izdelati in po potrebi prilagoditi knjižnico.

Sklep

Poravnave obstajajo in verjetno jih sploh nisem omenil. Toda večina jih splošno ne velja za vse CSS-in-JS. Odvisno so od tega, katero knjižnico uporabljate in kako jo uporabljate.

* Za ta stavek bo potreben namenski članek. Sporočite mi na Twitterju (@ oleg008) o tem, za katerega bi radi brali več.