Smart Styling met CSS-variabelen

In oktober 2022 heb ik zelfstandig de front-end styling van twee leerplatformen vernieuwd. Naast een verbeterde interface heb ik de stylesheets efficiënter gemaakt door CSS-variabelen te implementeren. Beide organisaties bedienen een diverse groep klanten en kregen regelmatig de vraag of het platform in de huisstijl van een specifieke klant kon worden aangeboden. Met CSS-variabelen heb ik dit proces sneller, flexibeler en schaalbaarder gemaakt.

Het probleem:

_{Oude situatie: Aparte CSS bestanden voor iedere klant.}

Voorheen kreeg elke klant een eigen CSS-bestand waarmee de omgeving werd gestyled. Dit betekende dat iedere nieuwe klant een kopie kreeg van een eerder gebruikt stylesheet. Dit leidde op den duur tot overlappingen, inconsistenties en onverwachte styling-uitkomsten. De interface vertoonde vreemde gedragingen, was slecht responsive en zorgde uiteindelijk voor een frustrerende gebruikerservaring.

De oplossing:

_{Nieuwe situatie: Basis CSS bestand met variabelen per klant.}

Er moest een basisstylesheet komen waarop alle klantomgevingen konden leunen. Dit zou zorgen voor een eenvoudigere workflow voor toekomstige aanpassingen en een soepelere onboarding van nieuwe klanten.

Door kernvariabelen zoals lettertypes, kleuren, light/dark mode en andere stijlkenmerken in een centraal stylesheet onder te brengen, kon elke klantomgeving met slechts een paar regels custom CSS worden aangepast aan hun huisstijl.

CSS variabelen in de praktijk

Hieronder een voorbeeld van de flexibiliteit die deze aanpak biedt. Met slechts tien variabelen is een compleet nieuwe omgeving te creëren die voldoet aan de huisstijl van een klant. Bovendien kunnen wijzigingen eenvoudig worden doorgevoerd in het basisstylesheet, waarna alle klantomgevingen automatisch de updates overnemen. Dit is vooral handig bij de introductie van nieuwe functionaliteiten of pagina’s.

Vanwege privacyredenen kan ik geen klantomgevingen tonen, maar hieronder een voorbeeld van de toepassing van de CSS variabelen.