De Verschillende Perspectieven op CSS-in-JS

0
18

Sommige mensen regelrechte haat het idee van CSS-in-JS. Alleen die naam is beledigend. Hard nee. Styling hoort niet in de CSS, het behoort in CSS, een ding dat al bestaat en dat browsers zijn geoptimaliseerd om te gebruiken. Scheiding van belangen. Iets anders is een lachwekkend misstap, een teken om niet te leren uit de fouten van het verleden (zoals de <font> tag en dergelijke.)

Sommige mensen regelrechte hou van het idee van CSS-in-JS. De co-locatie van sjablonen en functionaliteit, à la meest JavaScript frameworks, heeft bewezen succesvol te zijn, dus is verpakt in stijlen lijkt een natuurlijke pasvorm. Vue is enkel bestand onderdelen zijn een archetype hier.

(Hier is een video over CSS-in-JS heb ik met Dustin Schau als je een primer nodig.)

Brent Jackson denkt dat je zeker moet leren, maar biedt ook een aantal pragmatische punten op wat het doet en niet doet:

Wat is CSS-in-JS doen?

  • Laat u auteur CSS-JavaScript-syntax
  • Colocate stijlen met onderdelen
  • Profiteer van native JS syntaxis functies
  • Profiteer van alles zijn: van het JS ecosysteem

Wat is CSS-in-JS niet kwijt je hoeft te begrijpen:

  • Hoe stijlen worden toegepast op de DOM
  • Hoe werkt erfenis
  • Hoe CSS-eigenschappen werken
  • Hoe CSS-lay-out werkt

CSS-in-JS niet ontslaat u van het leren van CSS. Meestal, hoe dan ook.

Ik heb gehoord dat veel van de pushback op CSS-in-JS in de trant van “u mensen bereiken die voor CSS-in-JS, omdat je niet begrijpt CSS” of “Je doet dit omdat je bang bent van de cascade. Ik weet al hoe bereik CSS.” Ik vind dat spul om meer te porren over de eilanden, die niet echt handig is.

Laura broodjes heeft een heerlijk twee-zijdig artikel met de titel “Het web zonder het web” voor een deel is over Reageren en CSS-in-JS:

Ik haat Reageren omdat CSS-in-JS benaderingen standaard moedigen u aan om te schrijven, volledig zelfstandige eenmalige componenten in plaats van te proberen om een website te bouwen UI als een geheel.

U hoeft niet te gebruiken CSS-in-JS gewoon omdat je Reageren, maar het is populair, en dat is een zeer interessante en terechte kritiek. Als u het bereik voor alles, ben je niet jezelf op een hoger risico van inconsistentie?

Ik heb, tot nu toe, een fan van CSS modules in dat het ongeveer net zo licht als u als het gaat om het CSS-in-JS, alleen hanteren scoping en co-locatie en dat is het zowat. Ik gebruik het met Sass, zodat wij toegang hebben tot mixins en variabelen die helpen consistentie, maar ik kon zien hoe het zou kunnen leiden dat een dia in gevaarlijk te-veel-one-offs grondgebied.

En toch, ze zou wegwerp-offs. Code-splittable one-offs. Alles bestaat in balans.

Laura gaat zeggen ze houdt van CSS-in-JS benaderingen voor sommige van de kracht en flexibiliteit die het biedt:

Ik hou van de manier waarop CSS-in-JS geeft u voldoende abstractie nog steeds gebruik van trucs als een blinde uil kiezers, terwijl ook het geven u de volledige kracht van het gebruik van JS om dingen te doen zoals container-query ‘ s.

Martin Hofmann een site gemaakt te vergelijken BEM vs. Emotie die kijkt een beetje “alert” – component. Ik hou van hoe het is een emotieloze (letterlijk, niet naar de bibliotheek) vergelijking dat ziet er op syntax. BEM heeft een aantal voordelen, met name, waarvoor geen gereedschap en is gemakkelijk deelbaar naar een web project. Maar de Emotie aanpak schoner is op vele manieren en lijkt makkelijker te hanteren.

Ik zou graag zien dat meer emotieloos vergelijkingen van de technologieën. Keuze A heeft deze drie dingen goed, maar is pijnlijk, hier en hier, terwijl de keuze B doet deze andere dingen goed en lost een paar andere pijn punten.

We recentlylinked up Scott Jehl post dat ziet er in het laden van CSS-asynchroon. Scott ‘ s openingszin:

Een van de meest indrukwekkende dingen die we kunnen doen pagina ‘ s te verbeteren de prestaties en de veerkracht is om te laden van CSS op een manier die geen vertraging pagina rendering.

Het is opvallend dat een all-in CSS-in-JS aanpak krijgt deze mogelijkheid natuurlijk, als styling is gebundeld in JavaScript. Het is gebundeld op een kostprijs. De kosten voor de prestaties. Maar we krijgen een deel van die kosten terug als we het elimineren van andere render-het blokkeren van dingen. Dat is interessant spul waard meer gegevens, ten minste.

Ik kan mijn kont geschopt, maar ik ben een beetje minder geïnteresseerd in de gesprekken die probeert om de schuld van CSS-in-JS voor het verhogen van de drempel in de industrie. Dat is een enorme ding om te overwegen, maar we zijn niet te praten over het afsluiten van CSS hier en waardoor iedereen een andere taal. We praten over niche-bibliotheken voor bepaalde soorten projecten op bepaalde schalen.

Ik denk dat het de moeite waard eens een kijkje te nemen op CSS-in-JS ideeën als…

  • U bent bezig met een component-zware JavaScript project toch.
  • U bent al co-locating sjablonen, functionaliteit en data query ‘ s.
  • Je denkt dat je kunt benutten zonder afbreuk te doen aan de gebruikerservaring, zoals snelheid, weer elders.
  • Uw team is comfortabel met de vereiste tech, als in, je bent niet wegdrukken talent.

Max Stoiber is een ongegeneerde fan, maar zijn post op het onderwerp spreekt over het vertrouwen in deze stijl brengt hem en de tijd die hij opslaat in het vinden van wat hij nodig heeft, zowel dingen die ik heb gevonden om waar te zijn. Maar hij denkt ook dat de aanpak specifiek voor het JavaScript framework apps.

Als u een JavaScript-framework voor het bouwen van een web app met onderdelen, CSS-in-JS is waarschijnlijk een goede pasvorm. Vooral als je deel uitmaakt van een team waar iedereen begrijpt basis van JavaScript.

Ik zou graag horen y ‘ all gedachten over dit in de comments. Werkt u al uit je gevoelens op dit alles? Madly in love? Ziedende met een hekel aan? Ik zou het meest geïnteresseerd in het horen van succesverhalen of falen verhalen op echte projecten.