Het artikel beschrijft de herbouw van Firefox.com in samenwerking met Mozilla en Lincoln Loop, waarbij volledig is ingezet op moderne, native CSS zonder preprocessors. De auteur reflecteert op het historische 'CSS Zen Garden'-project uit 2008, dat liet zien dat content en styling volledig gescheiden konden worden, maar in de praktijk destijds onhaalbaar was door beperkingen in browsers en het ontbreken van variabelen.
Met de komst van Custom properties, Grid en Flexbox is dit gat nu gedicht. Voor Firefox.com is een designsystem ontwikkeld met meer dan 70 componenten en 25 paginasjablonen, geïmplementeerd als Wagtail-componenten voor het contentteam. Hoewel PostCSS is gebruikt voor het optimaliseren van @import-statements uit performance-overwegingen, blijft de broncode native CSS. De auteur concludeert dat de waarde van een designsystem ligt in de snelheid en consistentie waarmee een ontwerp direct in productie terechtkomt.
De droom van CSS Zen Garden, eindelijk gerealiseerd
Terug in 2008, net na mijn studie, ontdekte ik CSS Zen Garden. Dit was een project van Dave Shea waarbij één HTML-bestand volledig anders gestyled kon worden met niets anders dan CSS. Het was een glimp van de droom: een clean, herbruikbaar design dat volledig gescheiden was van de content.
Maar zodra je echt werk voor klanten probeerde op te leveren, stortte die droom in. Er waren geen CSS-variabelen. De beschikbare eigenschappen waren onvoldoende om een high-fidelity design uit te drukken, waardoor we leunden op server-side processing, afbeeldingen, tabel-layouts en eindeloze hacks. Elke browser renderde zaken anders, dus een groot deel van het werk bestond uit het zorgen dat één design overal hetzelfde reageerde. Zen Garden liet zien wat theoretisch mogelijk was; de productiepraktijk was een heel ander verhaal.
Het heeft bijna twee decennia geduurd om dat gat te dichten, waarbij de meeste vooruitgang de afgelopen jaren is geboekt. Custom properties gaven ons variabelen die de browser begrijpt. Grid en Flexbox zorgden voor layouts die niet langer in strijd zijn met het medium. De eigenschappen die we in 2008 misten, bestaan nu en zijn consistent genoeg geïmplementeerd om daartegenaan te ontwerpen, in plaats van eromheen.
Firefox.com
Dat gat is nu eindelijk gedicht. Moderne CSS kan nu native doen wat we voorheen met preprocessors en hacks moesten oplossen. Bij de herbouw van Firefox.com, in samenwerking met Mozilla en het team van Lincoln Loop, heb ik het volledige systeem gebouwd in moderne, native CSS zonder preprocessors. Custom properties worden direct geëxporteerd uit designbestanden, native CSS wordt één keer geschreven zonder hacks en het werkt in elke moderne browser. Voor legacy-browsers zorgt een minimale, branded stylesheet voor een basisversie van de branding die toegankelijk blijft.
Samen hebben we een designsystem gebouwd van meer dan 70 componenten en 25 paginasjablonen. Deze zijn geïmplementeerd als Wagtail-componenten, zodat het contentteam van de site pagina's kan samenstellen zonder hulp van engineers. De site ondersteunt momenteel 19 verschillende talen en regio's.
Hierbij hoort één eerlijke voetnoot: we hebben in productie uiteindelijk toch PostCSS gebruikt, maar voor één specifieke taak: het inlinen van @import-statements. Native @import heeft in sommige browsers nog steeds slechte prestatiekenmerken, en op een site als deze weegt dat zwaarder dan architecturale zuiverheid. De geschreven CSS is echter nog steeds gewone, native CSS. Niets in de code is afhankelijk van een build-stap om geldig te zijn of begrijpelijk te zijn. De build-stap vlakt enkel samen wat de browser anders serieel zou ophalen.
Dit onderscheid is belangrijk wanneer iemand beweert dat een project "geen build-stap" heeft. Wat er echt toe doet, is of de broncode die je schrijft de taal is die de browser spreekt, of een dialect dat alleen bestaat tot het moment van compilatie.
Waarom dit belangrijk voor me was
De droom van Zen Garden is eindelijk in een productieomgeving gerealiseerd. Dat ik dit kon doen met Mozilla, een van de leiders op het gebied van webstandards, betekende veel voor me. Firefox.com is een site over de browser, gemaakt door de organisatie die 20 jaar lang heeft gepleit voor het platform dat gebruikt is om de site te bouwen. Er is geen betere plek om te ontdekken of het platform echt klaar is.
Dat is het.
Ik ben in het krijt bij de mensen die mijn visie op dit vak hebben gevormd: Nicole Sullivan, Rachel Andrew, Jen Simmons, Chris Coyier, Kasey Kelly (die me in contact bracht met het Mozilla-project) en Eric Meyer, mijn lokale held. Hun werk heeft een hele generatie geleerd om CSS als een systeem te beschouwen.
De rode draad
Dit is de rode draad in al mijn werk: designsystemen die teams in staat stellen om snel te bewegen en consistent te blijven, ongeacht of de bouwstenen pure CSS, Tailwind of shadcn/ui zijn. De tools veranderen elke paar jaar. Wat niet verandert, is de waarde van een systeem waarbij de juiste manier van werken ook de makkelijkste manier is, en waarbij de beslissing van een designer zonder drie keer vertaald te worden direct in productie terechtkomt.
Als jouw team de front-end fundering opnieuw overweegt, neem dan contact op.
De droom van CSS Zen Garden, eindelijk gerealiseerd
Terug in 2008, net na mijn studie, ontdekte ik CSS Zen Garden. Dit was een project van Dave Shea waarbij één HTML-bestand volledig anders gestyled kon worden met niets anders dan CSS. Het was een glimp van de droom: een clean, herbruikbaar design dat volledig gescheiden was van de content.
Maar zodra je echt werk voor klanten probeerde op te leveren, stortte die droom in. Er waren geen CSS-variabelen. De beschikbare eigenschappen waren onvoldoende om een high-fidelity design uit te drukken, waardoor we leunden op server-side processing, afbeeldingen, tabel-layouts en eindeloze hacks. Elke browser renderde zaken anders, dus een groot deel van het werk bestond uit het zorgen dat één design overal hetzelfde reageerde. Zen Garden liet zien wat theoretisch mogelijk was; de productiepraktijk was een heel ander verhaal.
Het heeft bijna twee decennia geduurd om dat gat te dichten, waarbij de meeste vooruitgang de afgelopen jaren is geboekt. Custom properties gaven ons variabelen die de browser begrijpt. Grid en Flexbox zorgden voor layouts die niet langer in strijd zijn met het medium. De eigenschappen die we in 2008 misten, bestaan nu en zijn consistent genoeg geïmplementeerd om daartegenaan te ontwerpen, in plaats van eromheen.
Firefox.com
Dat gat is nu eindelijk gedicht. Moderne CSS kan nu native doen wat we voorheen met preprocessors en hacks moesten oplossen. Bij de herbouw van Firefox.com, in samenwerking met Mozilla en het team van Lincoln Loop, heb ik het volledige systeem gebouwd in moderne, native CSS zonder preprocessors. Custom properties worden direct geëxporteerd uit designbestanden, native CSS wordt één keer geschreven zonder hacks en het werkt in elke moderne browser. Voor legacy-browsers zorgt een minimale, branded stylesheet voor een basisversie van de branding die toegankelijk blijft.
Samen hebben we een designsystem gebouwd van meer dan 70 componenten en 25 paginasjablonen. Deze zijn geïmplementeerd als Wagtail-componenten, zodat het contentteam van de site pagina's kan samenstellen zonder hulp van engineers. De site ondersteunt momenteel 19 verschillende talen en regio's.
Hierbij hoort één eerlijke voetnoot: we hebben in productie uiteindelijk toch PostCSS gebruikt, maar voor één specifieke taak: het inlinen van @import-statements. Native @import heeft in sommige browsers nog steeds slechte prestatiekenmerken, en op een site als deze weegt dat zwaarder dan architecturale zuiverheid. De geschreven CSS is echter nog steeds gewone, native CSS. Niets in de code is afhankelijk van een build-stap om geldig te zijn of begrijpelijk te zijn. De build-stap vlakt enkel samen wat de browser anders serieel zou ophalen.
Dit onderscheid is belangrijk wanneer iemand beweert dat een project "geen build-stap" heeft. Wat er echt toe doet, is of de broncode die je schrijft de taal is die de browser spreekt, of een dialect dat alleen bestaat tot het moment van compilatie.
Waarom dit belangrijk voor me was
De droom van Zen Garden is eindelijk in een productieomgeving gerealiseerd. Dat ik dit kon doen met Mozilla, een van de leiders op het gebied van webstandards, betekende veel voor me. Firefox.com is een site over de browser, gemaakt door de organisatie die 20 jaar lang heeft gepleit voor het platform dat gebruikt is om de site te bouwen. Er is geen betere plek om te ontdekken of het platform echt klaar is.
Dat is het.
Ik ben in het krijt bij de mensen die mijn visie op dit vak hebben gevormd: Nicole Sullivan, Rachel Andrew, Jen Simmons, Chris Coyier, Kasey Kelly (die me in contact bracht met het Mozilla-project) en Eric Meyer, mijn lokale held. Hun werk heeft een hele generatie geleerd om CSS als een systeem te beschouwen.
De rode draad
Dit is de rode draad in al mijn werk: designsystemen die teams in staat stellen om snel te bewegen en consistent te blijven, ongeacht of de bouwstenen pure CSS, Tailwind of shadcn/ui zijn. De tools veranderen elke paar jaar. Wat niet verandert, is de waarde van een systeem waarbij de juiste manier van werken ook de makkelijkste manier is, en waarbij de beslissing van een designer zonder drie keer vertaald te worden direct in productie terechtkomt.
Als jouw team de front-end fundering opnieuw overweegt, neem dan contact op.
Groetjes,