Firefox.com réussi le pari du CSS pur sans préprocesseur
En bref
- L'équipe de Mozilla et Lincoln Loop a reconstruit Firefox.com en CSS natif sans préprocesseur, validant que le langage a enfin mûri pour des designs complets.
- Le projet s'appuie sur les Variables CSS (Custom Properties), Flexbox et Grid pour gérer un système de 70+ composants et 25 templates sans hacks de navigateur.
- PostCSS reste utilisé en production pour un seul problème : aplatir les imports @import pour éviter les requêtes sérielles, mais le CSS source reste pur.
- Cette approche évoque l'idée fondatrice de CSS Zen Garden (2003) : séparer design et contenu, mais appliquée à un site réel en 2026.
Ce que dit la source
L'auteur affirme que CSS a enfin atteint la maturité nécessaire pour supporter des designs full-fidelity en production sans préprocesseurs ni hacks navigateur. Le projet Firefox.com en serait la preuve : construit avec un système de 70+ composants et 25 templates de page, entièrement en CSS natif, supportant tous les navigateurs modernes et les navigateurs legacy via dégradation progressive.
- Le système de design exporte les tokens directement depuis les fichiers de conception en Custom Properties CSS
- La seule dérogation au CSS pur : PostCSS pour aplatir les imports @import et éviter des requêtes sérielles, mais le CSS source reste valide sans étape de build
- Support cross-browser sans hacks pour tous les navigateurs en "Enhanced support" (navigateurs modernes) et fallback accessible pour "Degraded support" (navigateurs legacy)
- Les tokens visuels et la séparation markup/styles permettent à l'équipe contenu de créer des pages multilingues sans help engineering
Dans les commentaires
Débat partagé, mais polarisé. Une partie du fil célèbre la démonstration de la maturité CSS ; une autre conteste le lien avec CSS Zen Garden (designs uniques vs styles multiples) et soulève des objections de fond sur la séparation des préoccupations.
- Plusieurs commentateurs contestent que Firefox.com valide réellement le rêve original de CSS Zen Garden, qui reposait sur un seul markup avec plusieurs designs radicalement différents : ici, un seul design sur un seul site. Débat structurel sur la séparation markup/styles : certains arguent qu'elle crée une structure implicite complexe cachée dans les sélecteurs CSS, contre la transparence affichée par Tailwind (même si Tailwind "laide") ; l'auteur conteste cet argument en pointant qu'une composantisation correcte réduit ce problème. Rapport soulevé sur une dérogation mineure : PostCSS pour @import reste nécessaire en production, et un commentateur note des problèmes d'affichage concrets (flickering de fontes sur Firefox Android, menu coupé sur Chrome Android). Un commentateur critique vigoureusement CSS Zen Garden comme source historique de dégradation UX (layouts rigides, boutons coupés, beaucoup de whitespace), non comme validation de flexibilité.
- takeaway
- Firefox.com valide que CSS moderne (Custom Properties, Grid, Flexbox) permet de gérer un design system complet sans préprocesseur sur un site de production. Techniquement solide, bien documenté, intéressant pour DSI en charge de design systems ambitieux. Cependant, la revendication d'avoir "livré le rêve CSS Zen Garden" est rhétoriquement forcer : c'est plutôt la preuve que CSS peut enfin faire ce qu'on attendait d'une feuille de styles depuis 20 ans, avec une séparation de préoccupations pratique. Le vrai apprentissage : le CSS est assez puissant pour disparaître de la radar comme problème technique sur un site bien conçu, ce qui est rare et mérite d'être noté.
- alternatives
- null
- }
Notre lecture
Firefox.com valide que CSS moderne (Custom Properties, Grid, Flexbox) permet de gérer un design system complet sans préprocesseur sur un site de production. Techniquement solide, bien documenté, intéressant pour DSI en charge de design systems ambitieux. Cependant, la revendication d'avoir « livré le rêve CSS Zen Garden » est rhétoriquement forcée : c'est plutôt la preuve que CSS peut enfin faire ce qu'on attendait d'une feuille de styles depuis 20 ans, avec une séparation de préoccupations pratique. Le vrai apprentissage : le CSS est assez puissant pour disparaître du radar comme problème technique sur un site bien conçu, ce qui est rare et mérite d'être noté.