Hoe CSS variabelen te gebruiken

In deze beginners handleiding zal ik de basis uitleggen van het gebruik van CSS Variables en wat de voordelen zijn ten opzichte van het gebruik van algemene CSS. In het engels zeg je CSS Variables en in het Nederlands CSS variabelen, je kunt ze beide gebruiken.

Wat is CSS?

CSS is de afkorting van Cascading Style Sheets. Dit klinkt misschien nog steeds onduidelijk, maar simpel gezegd is CSS een programmeertaal waarmee websites en webshops ontworpen kunnen worden. CSS geeft de programmeur de mogelijkheid tot het volledig vormgeven van zijn webpagina’s. Denk hierbij aan het aanpassen van het lettertype of de kleur van headings in jouw content. Vroeger werd vooral HTML gebruikt voor het schrijven van webpagina’s, maar ook voor de vormgeving van deze pagina’s.

Wat is het verschil tussen HTML en CSS?

HTML staat voor Hyper Tekst Markup Language. HTML is een ‘client-side’ programmeertaal en wordt dus lokaal uitgevoerd op jouw apparaat en niet op de server. Ook CSS is een ‘client-side’ programmeertaal. Het verschil tussen HTML en CSS is dat HTML zorgt voor een algemene structuur en opmaak van jouw webpagina’s. CSS daarentegen is ontwikkeld om veel gedetailleerder jouw webpagina’s te ontwerpen. CSS is een veel sterker stijlbladtaal waarmee bijvoorbeeld men de exacte positie van een element kan aangeven, kleuren kan aangeven en lettertypes of groottes aanpast naar wens. Een bijkomend verschil tussen HTML en CSS is dat HTML gebruik maakt van ‘tags’ waarmee de content/inhoud wordt omringt. CSS maakt gebruik van ‘selectors’, die door een aangifteblok worden gevolgd.

Wat zijn CSS Variables?

CSS Variabelen worden ook wel Custom Properties genoemd. Een CSS Variabele wordt bovenaan jouw code toegevoegd in de backend. Het geeft de programmeur de mogelijkheid om middels een variabele een element een bepaald gegeven toe te wijzen. Als voorbeeld nemen we de kleuren keuze voor elementen binnen jouw webpagina. Denk hierbij aan de kleur die toegewezen is aan een blok, sidebar of de footer. Op moment dat de programmeur de kleur van deze elementen wil aanpassen, dient hij/zij in de code ieder stukje dat de kleur aangeeft aan te passen. Door bovenaan in de code een CSS Variable toe te voegen, kunnen programmeurs enkel de variabele wijzigen. Dit resulteert erin dat in de gehele code de elementen die de CSS Variable bevatten automatisch worden gewijzigd.

:root {
  --main: #030303;
  --accent: #5a5a5a;
}

.container {
  color: var(--main);
}

.footer {
  border-color: var(--main);
}

.sidebar {
  color: var(--accent);
}

.module {
  border-color: var(--accent);
}

In bovenstaande voorbeeld zie je css variabelen in de praktijk. Bovenaan de code zijn twee CSS Variables toegevoegd: –main & –accent. De CSS Variables zijn vervolgens gebruikt om de kleur van in totaal vier elementen aan te geven in de code: container, footer, sidebar en module. Op deze manier kan in de code voor nog meer elementen een CSS Variable worden ingevuld om op deze manier de kleur daarvan aan te geven. Wanneer later de programmeur een andere kleur wenst voor bepaalde elementen, kan simpelweg de CSS Variable bovenaan de code worden gewijzigd.