Olika Perspektiv på CSS-i-JS

0
33

Vissa människor direkt hatar tanken på att CSS-i-JS. Bara det namnet är stötande. Svårt nej. Styling som inte hör hemma i JavaScript, tillhör det i CSS, en sak som redan finns och den webbläsare som är optimerad för att använda. Separation av oro. Allt annat är en skrattretande felsteg, ett tecken på att inte lära av de misstag i det förflutna (som <font> – taggen och sådant.)

Vissa människor direkt älskar tanken på att CSS-i-JS. Co-location av mallar och funktionalitet, à la mest JavaScript-ramverk, har visat sig vara framgångsrik för dem, så inslagning i stilar som verkar som en naturlig passform. Vue: s enda fil komponenter är en arketyp här.

(Här är en video på CSS-i-JS jag gjorde med Dustin Schau om du behöver en primer.)

Brent Jackson tycker att du bör definitivt lära sig det, men erbjuder också några pragmatiska punkter på vad den gör och inte gör:

Vad har CSS-i-JS göra?

  • Låt dig författare CSS-JavaScript-syntax
  • Ta emot stilar med komponenter
  • Dra nytta av infödda JS syntax funktioner
  • Ta fördel av allt från JS ekosystem

Vad har CSS-i-JS inte bli som du behöver för att förstå:

  • Hur stilar används för att DOM
  • Hur arv fungerar
  • Hur CSS-egenskaper arbete
  • Hur CSS-layout fungerar

CSS-i-JS inte frikänna du av lärande CSS. Mestadels i alla fall.

Jag har hört massor av stift på CSS-i-JS i anda av: “du människor att nå för CSS-i-JS eftersom du inte förstår CSS” eller “Du ska göra detta eftersom du är rädd för kaskad. Jag vet redan hur man omfattning CSS.” Jag tycker att saker ska vara mer peta över öarna som inte är till särskilt stor hjälp.

Laura bullar har en härlig två-sidig artikel med titeln “internet, utan att webben” som delvis handlar om att Reagera och att CSS-i-JS:

Jag hatar att Reagera eftersom CSS-i-JS strategier som standard uppmuntra dig att skriva helt fristående en av komponenterna i stället för att försöka bygga en webbplats UI upp som en helhet.

Du behöver inte använda CSS-i-JS bara för att du använder Reagera, men att det är populärt, och det är en mycket intressant och rättvis kritik. Om du kollar allt, inte du lägger dig på högre risk för inkonsekvens?

Jag har, hittills, en fläkt av CSS-moduler i att det är ungefär lika lätt som du kan få när det kommer till CSS-i-JS, endast hantering av omfattning och co-location och det är ungefär det. Jag använder det med Sass så har vi tillgång till mixins och variabler som hjälper konsekvens, men jag kan se hur det skulle kunna möjliggöra en bild till farliga alltför-många-en-offs territorium.

Och ändå, de skulle vara disponibel one-offs. Kod-splittable one-offs. Allting existerar i balans.

Laura går vidare med att säga att hon gillar CSS-i-JS strategier för en del av den kraft och flexibilitet som erbjuds:

Jag gillar sättet CSS-i-JS ger dig tillräckligt abstrakt för att fortfarande använda tricks som blinda ugglan väljare och samtidigt ge dig den fulla kraften av med JS för att göra saker som behållare frågor.

Martin Hofmann har skapat en webbplats med att jämföra BEM vs. Känsla som ser ut på en liten “varning” komponent. Jag gillar hur det är en känslolös (bokstavligen, inte refererar till biblioteket) jämförelse som ser på syntax. BEM har vissa fördelar, i synnerhet, kräver inga verktyg och är lätt delbar till någon web-projektet. Men Känslor strategi är renare på många sätt och ser lättare att hantera.

Jag skulle vilja se mer känslolös jämförelser av teknik. Val En gör dessa tre saker väl, men är smärtsamma här och här, medan val B har dessa andra saker bra och löser några andra smärtpunkter.

Vi har nyligen kopplat upp Scott Jehl inlägg som ser till att fylla på CSS asynkront. Scotts första raden:

En av de bästa saker vi kan göra för att förbättra prestanda och motståndskraft är att läsa in CSS på ett sätt som inte fördröja rendering av sidor.

Det är anmärkningsvärt att en allt-i CSS-i-JS strategi blir denna förmåga naturligt, som styling är paketerat i JavaScript. Det är medföljande till en kostnad. En kostnad för prestationen. Men vi får en del av kostnaden tillbaka om vi eliminera andra gör-att blockera saker. Det är intressanta grejer värda mer data, minst.

Jag kan få min rumpa sparkad för detta, men jag är lite mindre intresserade av samtal som försöker skylla CSS-i-JS för att höja inträdeshinder i branschen. Det är en massiv sak att tänka på, men vi talar inte om att stänga av CSS här och tvingar alla att vissa andra språk. Vi pratar om nisch bibliotek för vissa typer av projekt på vissa skalor.

Jag tycker att det är värt att ta en titt på CSS-i-JS idéer om…

  • Du arbetar på en komponent som är tunga JavaScript projektet i alla fall.
  • Du är redan samlokalisera mallar, funktioner och data frågor.
  • Du tror att du kan utnyttja det utan att skada användarens upplevelse, som att få fart tillbaka på andra håll.
  • Ditt team är bekväma med det som krävs tech, som i, du är inte driver bort talanger.

Max Stoiber-är en ogenerad fläkt. Hans inlägg på ämnet talar om förtroendet för denna stil ger honom den tid som han sparar i att hitta vad han behöver, både saker som jag har hittat för att vara sant. Men han tycker också att det tillvägagångssätt som är specifikt för JavaScript-ramverk apps.

Om du använder ett JavaScript-ramverk för att bygga en webb-app med komponenter, CSS-i-JS är nog en bra passform. Speciellt om du är en del av ett team där alla förstår grundläggande JavaScript.

Jag skulle älska att höra y ‘ all tankar om detta i kommentarerna. Har du arbetat ut dina känslor om allt detta? Kär i? Bubblar ogillar? Jag skulle vara mest intresserad av att höra berättelser om framgång eller misslyckande berättelser om verkliga projekt.