Waarom styled-components een handige keuze blijft voor React

Denk terug aan hoe lay-out in React er ongeveer zeven jaar geleden uitzag. We probeerden tevergeefs om CSS-klassen te isoleren via BEM, stapten toen over naar CSS Modules, en toen kwam styled-components. Het idee om stijlen direct in JS-bestanden te schrijven leek in het begin wild. JavaScript template literals hebben deze aanpak snel omgezet in een van de webontwikkelingsstandaarden.

Nu zijn Tailwind CSS en atomaire CSS-frameworks populair. Ondertussen heeft de styled-components repository meer dan 41 duizend sterren verzameld op GitHub en wordt deze nog steeds bijgewerkt. Ontwikkelaars gebruiken het actief voor lay-out, en de maintainers van het project passen de code aan voor huidige React-functies, waaronder React Server Components (RSC).

Waarom vertrouwde CSS vervangen door tagged templates

Het concept van de library is eenvoudig: je maakt een React-component die al alle benodigde stijlen bevat. Er is geen noodzaak om een complexe klassehiërarchie te bedenken of je zorgen te maken dat basisknopstijlen per ongeluk een modal aan de andere kant van de app kunnen breken.

De syntaxis blijft schone CSS zonder aanhalingstekens en komma's na elke regel:

Stijlen zijn nauw verbonden met de component. Verwijder Button uit het project en de stijlen verdwijnen ermee. Er blijft geen ongebruikte code achter in de uiteindelijke build.

Props, theming en dynamische weergave

Het sterke punt van CSS-in-JS komt naar voren waar de visuele presentatie direct afhangt van data of applicatiestate. Met CSS Modules zou je eindeloos klassen moeten toggelen via de classnames utility. Hier worden props direct in het stijlblok doorgegeven.

Parameters doorgeven zonder DOM-conflicten

Merk de $primary syntaxis op uit het bovenstaande voorbeeld. Het dollarteken geeft transient props aan. Variabelen die op deze manier zijn gemarkeerd, worden gebruikt binnen stijlen, maar de library filtert ze eruit en geeft ze niet door aan de uiteindelijke HTML-tag. De browserconsole blijft schoon zonder waarschuwingen over onbekende attributen.

Ingebouwde theming

Voor het werken met lichte en donkere thema's is er de ThemeProvider component. Het geeft het settings object door in de component tree met behulp van React Context.

Vervang de kleuren in het theme object en de interface wordt direct bijgewerkt. Dit vereenvoudigt het bouwen van je eigen design systems aanzienlijk.

Prestaties en server-side rendering

De library houdt automatisch bij welke componenten op elk moment op de pagina worden weergegeven en laadt alleen hun stijlen. De gebruiker downloadt geen extra code.

Voorheen werden CSS-in-JS-oplossingen bekritiseerd vanwege extra belasting tijdens hydratatie en SSR-problemen. In recente versies heeft het team de interne logica herschreven. De library kan werken met streaming SSR en werkt goed samen met React Server Components. Stijlen worden direct ingebed in de HTML-stream zonder vertragingen.

Wanneer styled-components gebruiken

Hier zijn vier scenario's waarin de library het beste presteert:

• Je bouwt een interne UI-componentenbibliotheek of design system met flexibele aanpassingsmogelijkheden.
• Het project bevat veel complexe interactieve elementen waarvan de visuele status verandert op basis van invoergegevens.
• Het team is gewend aan klassieke CSS-syntaxis maar wil betrouwbare stijlisolatie zonder build tool configs te configureren.
• Je schrijft een cross-platform project met React en React Native, met de verwachting één API voor stijlen te gebruiken.

Als je prioriteit is om de app te lanceren op apparaten met weinig rekenkracht met een minimaal JS-bundel, wil je misschien kijken naar Tailwind CSS of zero-runtime oplossingen zoals Linaria en Pigment CSS.

styled-components blijft een duidelijke en voorspelbare oplossing. De library neemt de hoofdpijn weg van het benoemen van klassen en geeft je schone CSS direct in de component body. Voor de meeste frontend-taken is de kracht van het tool meer dan voldoende.