Ik word bijgestaan door Dustin Schau in deze video en hij neemt me mee op een tour door de wereld van wat bekend is geworden als CSS-in-JS. Dat wil zeggen, je styling volledig in JavaScript doen, in plaats van in .cssbestanden die je helemaal alleen in je hoofd hebt.
Dustin is hiervoor een perfecte gids, aangezien hij in JS Playground een geweldige verkennende tool genaamd CSS heeft gemaakt en ook een geheel nieuwe cursus over het onderwerp heeft.
Als je benieuwd bent waarom iemand überhaupt geïnteresseerd zou zijn in het volgen van de CSS-in-JS-route, dan zijn hier enkele redenen die we in de video bespreken:
- Dode code eliminatie. De enige stijlen die worden geladen, zijn de stijlen voor de componenten die op een bepaald moment in gebruik zijn. Er worden geen ongebruikte stijlen verzonden. Wanneer een onderdeel sterft, gaat ook de stijl ervan.
- Scoping. Het schrijven van nieuwe stijlen kan niets anders op andere plaatsen op de site beïnvloeden, dus u hoeft zich geen zorgen te maken over het schrijven van een stijl die elders slechte of onbedoelde gevolgen heeft vanwege een selector in het globale bereik. We krijgen scope-bescherming met benoemingsideologieën zoals BEM, maar het wordt niet afgedwongen door tools.
- Zorgeloze naamgeving. In sommige gevallen is het niet nodig om een klassenaam of ID te kiezen voor wat er wordt opgemaakt, aangezien de uitvoer een gebruikersinterface is.
- Ergonomie van ontwikkelaars. Het kan prettig zijn om stijlen in hetzelfde bestand te hebben (of anders heel dicht bij) de component zelf. Op dezelfde manier voelen sommige ontwikkelaars zich erg op hun gemak in JSX. Ook als je dingen kunt stylen zonder je zorgen te maken, betekent dit dat ontwikkelaars zich meer bevoegd kunnen voelen over styling dan erdoor geïntimideerd te zijn.
- Ontwerpsysteemvriendelijk. Bij ontwerpsystemen draait alles om componenten, net als React. Deze complementaire denkwijzen sluiten redelijk goed op elkaar aan.
- Mogelijkheden van JavaScript in CSS. Door dit te doen met logische operatoren en doorgegeven in waarden en wiskunde en zo, is het nuttig om de volledige kracht van JavaScript in stijlen te hebben.
En dat is niet alles, maar u kunt zien waarom het voor sommige mensen aantrekkelijk is. Het heeft zeker tot veel discussies geleid. Waarom niet als het al die voordelen biedt? Nou, het is een heel andere ontwikkelomgeving die niet per se bij iedereen klikt. Het vereist het webplatform buigen om ietwat ongebruikelijke dingen te doen en dat komt met wratten. Om nog maar te zwijgen van het feit dat er letterlijke kosten aan verbonden zijn (grootte van pakketten en dergelijke) waarvoor gebruikers betalen, waarvan je maar beter kunt hopen dat het zichzelf terugbetaalt met efficiëntie.
Dustin ging zelfs zo ver dat hij een demo bouwde met Sass om dingen te stylen om het te vergelijken met hoe het gedaan kan worden met CSS-in-JS, wat laat zien hoe het porten van stijlen eruitziet en de mogelijkheden om het te doen.