De Forskjellige Perspektiver på CSS-i-JS

0
13

Noen mennesker regelrett hater tanken på CSS-i-JS. Bare navnet er støtende. Hard nr. Styling ikke hører hjemme i JavaScript, det hører hjemme i CSS, en ting som allerede eksisterer, og at de er optimalisert for å bruke. Separasjon av bekymringer. Noe annet er latterlig feilsteg, et tegn på ikke å lære av feilene fra fortiden (som <font> – tag og slikt.)

Noen mennesker regelrett elsker tanken på CSS-i-JS. Co-plassering av maler og funksjonalitet, à la mest JavaScript-rammeverk, har vist seg vellykket for dem, slik at innpakning er i stiler virker som en naturlig tilpasning. Vue er enkelt fil komponenter er en arketype her.

(Her er en video på CSS-i-JS jeg gjorde med Dustin Schau hvis du trenger en primer.)

Brent Jackson mener du bør definitivt lære det, men tilbyr også noen pragmatisk poeng på hva det gjør og ikke gjør:

Hva gjør CSS-i-JS gjøre?

  • La du forfatteren CSS JavaScript-syntaks
  • Colocate stiler med komponenter
  • Dra nytte av innfødte JS syntaks funksjoner
  • Dra nytte av alt fra JS økosystem

Hva gjør CSS-i-JS ikke kvitt deg med at det er nødvendig å forstå:

  • Hvordan stiler er brukt til DOM
  • Hvordan fungerer arv
  • Hvordan CSS-egenskaper arbeid
  • Hvordan CSS-layout fungerer

CSS-i-JS ikke frikjenne du lære CSS. For det meste, uansett.

Jeg har hørt mange pushback på CSS-i-JS i retning av “du folk som kommer for CSS-i-JS fordi du ikke forstår CSS” eller “Du gjør dette fordi du er redd for kaskade. Jeg vet allerede hvordan du omfang CSS.” Jeg synes at ting skal være mer poking over øyer som ikke er spesielt nyttig.

Laura boller har en fantastisk to-siders artikkel med tittelen “nettet uten internett” del av noe som er om Reagere og CSS-i-JS:

Jeg hater å Reagere fordi CSS-i-JS tilnærminger som standard oppfordrer deg til å skrive helt selvstendig én av komponentene, heller enn å prøve å bygge et nettsted UI opp som en helhet.

Du trenger ikke å bruke CSS-i-JS bare fordi du bruker Reagere, men det er populært, og det er en veldig interessant og rettferdig kritikk. Hvis du omfang alt, er du ikke setter deg selv i en høyere risiko for inkonsekvens?

Jeg har vært, så langt, er en fan av CSS moduler i at det er omtrent like lett som du får når det kommer til CSS-i-JS, bare for håndtering av omfang og co-location og det er om det. Jeg bruker den med Sass, slik at vi har tilgang til mixins og variabler som bidrar til konsistens, men jeg kan se hvordan det kan føre til at en side i farlig for-mange-one-offs territorium.

Og likevel, ville de være disponibel one-offs. Kode-splittable one-offs. Alt er i balanse.

Laura går på å si at hun liker CSS-i-JS tilnærminger for noen av kraften og fleksibiliteten det gir:

Jeg liker måten CSS-i-JS gir deg nok vann til å fortsette å bruke triks som blind owl-velgere, mens det også gir deg full effekt av å bruke JS å gjøre ting som beholder spørringer.

Martin Hofmann opprettet et nettsted som sammenligner BEM vs. Følelser som ser på en liten “alert” – komponenten. Jeg liker at det er en emotionless (bokstavelig talt, ikke referere til biblioteket) sammenligningen som ser på syntaks. BEM har noen fordeler, spesielt, krever ingen verktøy og lett kan deles til en web-prosjektet. Men Følelser tilnærming er renere på mange måter, og ser lettere å håndtere.

Jeg vil gjerne se mer emotionless sammenligninger av teknologi. Valg En gjør disse tre ting godt, men er smertefullt her og her, mens valg B gjør disse andre tingene godt og løser noen andre smerter poeng.

Vi har nylig koblet opp Scott Jehl er post som ser ut til lasting CSS asynkront. Scotts åpningen linje:

En av de mest effektive tingene vi kan gjøre for å forbedre side ytelse og robusthet er å laste CSS på en måte som ikke forsinkelse side rendering.

Det er bemerkelsesverdig at en alt-i CSS-i-JS tilnærming får denne muligheten, naturligvis, som styling er samlet inn i JavaScript. Det er pakket i en kostnad. En kostnad til ytelse. Men får vi noen av kostnaden tilbake hvis vi eliminere andre render-blokkere ting. Det er interessante ting verd mer data, minst.

Jeg kan få min rumpe sparket for dette, men jeg er litt mindre interessert i samtaler som prøver å skylde på CSS-i-JS for å øke etableringshindring i bransjen. Det er en massiv ting å vurdere, men vi er ikke snakker om å slå av CSS her og tvinge alle til noen andre språk. Vi snakker om nisje biblioteker for visse typer av prosjekter på bestemte skalaer.

Jeg tror det er verdt å ta en titt på CSS-i-JS ideer om…

  • Du jobber på en av komponent-tung JavaScript prosjektet likevel.
  • Du er allerede co-finne maler, funksjonalitet og data spørringer.
  • Du tror du kan utnytte det uten å skade brukeropplevelsen, som få fart tilbake andre steder.
  • Laget ditt er komfortabel med den nødvendige tech, som i, er du ikke skyve bort talent.

Maks Stoiber er en uforbeholden vifte. Hans innlegg om temaet snakker om tillit denne stilen som bringer ham og han sparer på å finne det han trenger, både ting jeg har funnet til å være sant. Men han mener også tilnærmingen er spesielt for JavaScript-rammeverk apps.

Hvis du bruker en JavaScript-rammeverk for å bygge en web-app med komponenter, CSS-i-JS er trolig en god passform. Spesielt hvis du er en del av et team hvor alle forstår grunnleggende JavaScript.

Jeg vil gjerne høre dere tanker om dette i kommentarfeltet. Har du jobbet ut dine følelser på alt dette? Forelsket i? Syder misliker? Jeg vil være mest interessert i å høre suksesshistorier eller feil historier på virkelige prosjekter.