Styled Components

Wat is Styled Components

Styled Components refereert hier niet naar de verzamelterm van gestijlde componenten, maar eerder naar een library die ons toelaat CSS in JavaScript te schrijven. Styled Components is dus een soort bibliotheek waarmee we CSS code kunnen integreren in JavaScript, om op die manier componenten te stijlen.

Het ontstaan van Styled Components is daarom ook direct te heleiden naar de nood aan een goede en duidelijke manier om CSS te definiëren naast bestaande React componenten. Het doel was niet alleen het gebruiksgemak voor de gebruiker te maximaliseren, maar ook de developer experience.

Hoe werkt Styled Components?

De primaire manier van werken met React is het definiëren van individuele componenten die samen fungeren als één geheel, namelijk de applicatie of website. Dit geldt trouwens ook voor Vue, Angular en andere fameworks, maar de functionaliteit wordt in kleinere stukken verdeeld om zo modulair mogelijk te kunnen werken. Dit optimaliseert het testen, updaten, optimaliseren en debuggen van de code. Bovendien kunnen meerdere mensen gemakkelijk kleinere taken opnemen en simultaan aan één project werken. Ieder aan verschillende componenten bijvoorbeeld.

Waar React, en meer specifiek JavaScript, de functionaliteit van de applicatie bepaalt, hebben we nog altijd nood aan CSS om deze componenten te stijlen. We zouden gewoon CSS kunnen gebruiken, maar in een grotere applicatie merk je al snel zware nadelen. We kunnen gebruik maken van bekende frameworks zoals Sass om onze bestanden te scheiden van elkaar en leuke extra’s zoals mixins en functies te kunnen gebruiken.

Hoe gebruik je Styled Components?

Wanneer je een functionele component aanmaakt in React kan je de stijl meedefiniëren in dat bestand. Hieronder vind je een zeer simpel voorbeeld waar we twee titels (h1 tags) renderen vanuit een component. We geven de tweede titel een stijl mee door er een Styled Component van te maken.

 

Hier zien we dat de tag die we gebruikten, vervangen is door een “geneste” component met een unieke naam. Je kan dit direct merken omdat de naam begint met een hoofdletter. We kunnen zelf kiezen welk soort tag gerenderd moet worden door dit mee te geven in het Styled Component. In dit geval opnieuw een h1.

In complexere scenario’s kunnen we deze stijlen afzonderen in een apart bestand, dicht bij de component zelf om onze code proper en schaalbaar te maken. De kracht van CSS op deze manier in JavaScript te schrijven is dat we op eigenschappen kunnen checken en aan de hand daarvan bepaalde stijlen weergeven.

Hieronder kan je een voorbeeldje vinden van een knop component dat een reeks standaardstijlen gedefinieerd heeft. Als we de eigenschap “primary” meegeven, krijgt de knop de primaire kleur van ons project. We voegen geen aparte klasse hiervoor toe aan de CSS, maar deze gaat dynamisch die stijl toekennen waar nodig. Dit heeft enkele voordelen die we straks in kaart brengen.

 

 

Voor- en nadelen

Is het gebruik van Styled Components interessant voor jou? Wij zetten de pro's en cons op een rijtje.

Voordelen:

  • Promoot het hergebruik van code en functionaliteit
  • Gaat automatisch kijken welke componenten er op de huidige pagina aanwezig zijn om zo enkel de nodige CSS te laden (critical CSS). Hierdoor laadt je gebruiker altijd de minst nodige hoeveelheid code in.
  • Omdat de CSS code altijd per component gescheiden is, heb je minder problemen met specificity in CSS. Elke stijl krijgt namelijk zijn eigen unieke gegenereerde naam. 
  • Omdat je elke stijl exporteert uit een Styled Component is het meteen duidelijk welke stijlen je niet gebruikt en dus kan verwijderen.
  • Styled Components zijn zeer adaptief naar de funtionaliteit en inhoud van je component omdat het kan communiceren met de JavaScript.
  • Onderhoud is vrij snel en makkelijk omdat je stijlen altijd per component bepaald worden.
  • Er worden waar nodig automatisch vendor prefixes toegepast zodat je CSS in elke browser op dezelfde manier zal werken.
  • Je schrijft nog altijd CSS en JavaScript en moet geen volledig nieuwe taal/syntax leren zoals bijvoorbeeld bij andere utility frameworks.

De nadelen van Styled Components:

  • Iets technischer om op te zetten en te beheren.
  • CSS in JavaScript is voor sommigen niet the way to go.
  • De complexere syntax oogt soms wat bizar en het schrijven ervan kan onnatuurlijk aanvoelen, zeker in het begin.
  • Het is geen basis functionaliteit in de meeste IDE’s, dus je installeert best een plugin of extensie.

Styled Components, geschikt voor jouw website of applicatie?

Styled Components is een sterke keuze voor applicaties of websites die eerder een grote schaal hebben en waar er potentieel is voor verdere groei. Waar performantie ook een zeer belangrijke rol speelt en het team een goede kennis of ervaring heeft met JavaScript.

Schrijf je in op onze nieuwsbrief

Altijd al willen weten waar we ons allemaal mee bezig houden doorheen het jaar? Schrijf je dan nu in voor onze nieuwsbrief en krijg al ons nieuws, vers van de pers.

Style elements blue