L’évolution des bases CSS : un regard sur plus de 20 ans de pratiques

Depuis les débuts du web, les développeurs cherchent à maîtriser l’apparence des éléments HTML, souvent en contournant les comportements imprévisibles des navigateurs.

Cet article revient sur l’évolution des bases CSS : non pas juste une histoire de resets techniques, mais un reflet des attentes changeantes autour de la structuration des styles. D’un besoin de contrôle total à une vision plus durable et centrée sur l’utilisateur, les bases CSS ont beaucoup appris, et nous aussi.

I. Pourquoi une base CSS est essentielle : harmoniser l’affichage inter-navigateurs

Au début du web, chaque navigateur appliquait ses propres styles par défaut aux éléments HTML. Un simple h1 pouvait ainsi apparaître avec des tailles de police ou des marges différentes selon le navigateur, rendant l'affichage des pages incohérent et imprévisible.

Pour résoudre ces disparités, les développeurs ont introduit l'idée d'une "base CSS" neutre. L'objectif : supprimer ou uniformiser les styles par défaut des navigateurs afin de partir d'une toile vierge, stable et prévisible. Cela permettait de garantir une présentation cohérente des éléments HTML de base, indépendamment du navigateur utilisé.

Ainsi, la base CSS est née d'un besoin de cohérence, non d'esthétique. Elle constitue le premier pas vers une expérience utilisateur fiable et maîtrisée, en neutralisant les comportements imprévisibles des navigateurs.

II. Reset CSS : tout supprimer pour tout contrôler

Avec la multiplication des navigateurs dans les années 2000, leurs différences d’interprétation des styles HTML sont vite devenues une source majeure de frustration. Pour y remédier, la communauté web a inventé le concept de reset CSS : une feuille de style de base, chargée dès l’ouverture d’un site, visant à neutraliser les styles par défaut du navigateur afin d’établir une base uniforme.

1. Les débuts : le sélecteur universel et ses limites

Les premiers resets consistaient à utiliser le sélecteur * pour supprimer toutes les marges et espacements :

* {
    margin: 0;
    padding: 0;
}

L'ajout progressif de propriétés comme border: 0, font: inherit ou vertical-align: baseline a rendu ces resets encore plus radicaux, au prix d’une perte de lisibilité, d’ergonomie, voire de logique sémantique.

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

Ce "Condensed Universal Reset" visait à neutraliser davantage de styles, mais il supprimait aussi des comportements attendus, comme les contours de focus pour la navigation clavier, posant des problèmes d'accessibilité et pouvait affecter les performances, surtout sur les navigateurs de l’époque, car le sélecteur universel ciblait chaque nœud du DOM, sans distinction.

2. De Tantek Çelik à Yahoo! : minimalisme ou radicalité

Face aux excès des resets globaux, Tantek Çelik propose dès 2004 une version beaucoup plus ciblée (undohtml.css). Il ne supprime que les styles problématiques, en respectant les conventions utiles du navigateur, une philosophie du "juste nécessaire".

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  */
/* http://creativecommons.org/licenses/by/2.0                     */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */

:link,:visited { text-decoration:none }

ul,ol { list-style:none }

h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

a img,:link img,:visited img { border:none }

address { font-style:normal }

À l’inverse, en 2006, Yahoo! intègre dans sa YUI Library un reset CSS strict (reset.css), conçu pour les besoins d’applications complexes. Il neutralise tous les éléments HTML pour imposer un rendu totalement contrôlé. Cette approche, idéale en contexte d’entreprise, s’est révélée trop rigide pour des projets plus créatifs ou éditoriaux.

Ces deux approches opposées ont souligné un besoin croissant de trouver un juste équilibre entre contrôle et flexibilité.

3. 2007, Le reset d’Eric Meyer : la première référence communautaire

Dans un paysage dominé par les extrêmes, entre le minimalisme de Tantek Çelik et l’approche radicale de Yahoo!, une nouvelle proposition émerge en avril 2007 : le reset CSS d’Eric Meyer. Figure emblématique du monde CSS et contributeur actif au W3C, Meyer propose une solution claire, méthodique et plus équilibrée.

Sa démarche est simple : créer une base neutre, stable, mais sans tout effacer aveuglément. Il dresse une liste exhaustive d’éléments HTML et leur applique des règles ciblées, dans le respect de la sémantique du balisage. Voici un aperçu de la version la plus connue, la v2.0, publiée en 2011 :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Mais ce n’est pas tout. Meyer ajoute aussi une série de règles ciblées pour gérer les comportements particuliers :

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

C'est cette approche réfléchie qui a séduit la communauté. Le reset d’Eric Meyer s’est rapidement imposé comme un standard de facto, intégré à de nombreux frameworks comme Blueprint, 960 Grid System, et plus tard Bootstrap. Il s’est retrouvé dans des CMS, des générateurs de sites, des boilerplates front-end. Bref, c’est devenu le point de départ idéal pour tout projet web professionnel.

4. Une décennie de resets CSS : entre expérimentations et maturité

Tout au long des années 2000, la communauté front-end a lentement mais sûrement affiné sa compréhension du concept de reset CSS. Ce qui avait commencé comme une opération radicale, supprimer tous les styles natifs des navigateurs, s’est transformé, au fil du temps, en une démarche plus subtile et réfléchie.

Des figures comme Tantek Çelik, Eric Meyer, ou encore l’équipe de Yahoo! avec YUI ont marqué les premières grandes étapes de cette évolution. Mais ils n’étaient pas seuls. De nombreux développeurs et collectifs ont proposé leurs propres variantes de resets, chacun avec ses nuances. Parmi ces alternatives moins connues mais tout aussi marquantes, on retrouve :

• Le Global Reset de Shaun Inman
• Le Poor Man’s Reset, minimaliste et pragmatique
• Le Siolon Global Reset, orienté typographie
• Le Tripoli Reset, qui préfigurait une logique de normalisation plus large

Tous ces resets avaient le même objectif : réduire les incohérences entre navigateurs. Cette diversité reflète une maturité croissante. Le reset CSS n’est plus une gomme universelle, mais un cadre de départ réfléchi, adaptable aux besoins du projet.

III. normalize.css : vers une nouvelle philosophie

Après plusieurs années dominées par des resets CSS radicaux, la communauté front-end commence à prendre du recul. Supprimer systématiquement tous les styles natifs des navigateurs n’est plus une évidence. En réalité, cette stratégie peut se révéler coûteuse, voire contre-productive. C’est dans ce contexte de maturité collective que naît, en 2011, une proposition différente : normalize.css.

1. Un tournant majeur dans l’histoire des bases CSS

Proposé par Nicolas Gallagher et Jonathan Neal, normalize.css ne cherche pas à remettre tous les compteurs à zéro. Il ne s’agit plus d’un « reset » au sens strict, mais d’un outil de normalisation ciblée. Son objectif : harmoniser les styles natifs entre navigateurs, sans pour autant effacer ce qui fonctionne bien.

Cette idée marque un vrai changement de paradigme. Plutôt que de neutraliser tous les comportements par défaut, normalize.css propose une base CSS plus respectueuse, plus intelligente, fondée sur une analyse détaillée des divergences entre navigateurs comme Chrome, Firefox, Safari et Internet Explorer.

2. Une philosophie nouvelle : collaborer avec le navigateur

La force de normalize.css réside dans sa philosophie subtile. Là où les resets traditionnels considéraient le navigateur comme un obstacle à contourner, normalize.css choisit au contraire d’en faire un partenaire.

Le HTML n’est pas neutre : il possède une sémantique et des comportements pensés pour la lisibilité, la structure, l’accessibilité. Un h1 n’est pas qu’un texte en gras : c’est un repère hiérarchique, qui joue un rôle dans le référencement, les aides techniques, et la cohérence visuelle. Même chose pour les paragraphes, les listes ou les balises d’acronyme.

En supprimant aveuglément ces styles, les resets classiques forçaient les développeurs à reconstruire ce que le navigateur savait déjà faire correctement. À l’inverse, normalize.css choisit de préserver les bonnes pratiques natives, tout en corrigeant les différences réellement problématiques d’un navigateur à l’autre.

3. Une organisation exemplaire : lisibilité, commentaires, rigueur

Autre innovation majeure de normalize.css : sa structure claire et documentée. Chaque bloc de règles est précédé d’un commentaire détaillé, souvent numéroté, qui explique la raison d’être de la règle, le contexte historique, ou le bug spécifique qu’elle corrige.

Cette approche transforme le fichier CSS en outil pédagogique. On n’y trouve pas une simple succession de sélecteurs, mais un véritable journal technique, dans lequel chaque ligne a un sens, un objectif, une trace historique.

Extrait de la version 1.0.0 :

/* ==========================================================================
Links
========================================================================== */

/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
    outline: thin dotted;
}

/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
    outline: 0;
}

Et un autre exemple, pour les contenus embarqués :

/* ==========================================================================
Embedded content
========================================================================== */

/*
* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7.
*/
img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

Cette clarté fait de normalize.css un modèle de lisibilité et de maintenabilité, qui tranche nettement avec les resets « bruts » du début des années 2000.

4. Une adoption massive et rapide

Dès sa publication, normalize.css rencontre un succès fulgurant. Il est rapidement intégré dans HTML5 Boilerplate, un template très populaire utilisé comme point de départ dans des milliers de projets web. Il est également adopté par des frameworks, des générateurs de sites, des systèmes de composants, et cité dans de nombreux guides de bonnes pratiques.

Cette adoption s’explique par plusieurs facteurs :

• Il fonctionne bien, sans effets secondaires inattendus,
• Il préserve les comportements utiles, là où les resets obligeaient souvent à tout re-styliser,
• Il résonne avec les préoccupations contemporaines autour de l’accessibilité, de la performance, de la lisibilité typographique et de l’expérience utilisateur.

Avec normalize.css, la base CSS devient plus solide, moins arbitraire, et plus proche des besoins réels du web moderne.

5. Un projet vivant, au rythme des navigateurs

Contrairement aux resets CSS figés dans le temps, normalize.css est un projet vivant, régulièrement mis à jour. À mesure que les navigateurs corrigent leurs écarts ou adoptent des standards unifiés, certaines règles deviennent obsolètes, et sont retirées.

Ce cycle de maintenance continue fait de normalize.css un miroir de l’évolution du web. Il suit les progrès du rendu natif, intègre les retours de la communauté, et s’adapte aux transformations des moteurs de rendu. Il a même inspiré d’autres projets dans la même veine, comme sanitize.css, modern-normalize, ou encore les bases CSS intégrées dans des design systems professionnels.

6. Une fin assumée, à la hauteur de son héritage

En 2023, Nicolas Gallagher annonce la fin de la maintenance active de normalize.css. Dans une note publiée sur GitHub, il explique que le projet a rempli ses objectifs : grâce à l’amélioration des moteurs de rendu modernes, de nombreuses corrections ne sont plus nécessaires. Le CSS natif des navigateurs a atteint une maturité qui rend le rôle de normalize.css moins critique qu’autrefois.

Il souligne également que les projets front-end contemporains utilisent souvent des design systems ou des bibliothèques CSS intégrées, qui embarquent déjà leurs propres stratégies de normalisation. Dans ce nouveau contexte, maintenir un fichier CSS de base unique et universel n’a plus autant de sens.

Le dépôt reste disponible, librement réutilisable ou forkable. Mais sa mise en sommeil marque la fin d’une époque, celle où le front-end avait besoin d’un fichier de compatibilité universel, garantissant un socle CSS cohérent à travers les navigateurs.

7. Un jalon historique pour le CSS moderne

normalize.css n’a pas seulement transformé la manière dont on structure les bases CSS : il a incarné une nouvelle éthique du développement front-end. Une éthique de respect des comportements natifs, de pragmatisme, de documentation claire et de cohérence durable.

Il a permis à toute une génération de développeurs de bâtir leurs interfaces sur des fondations solides, compréhensibles et pérennes. Et même s’il n’évolue plus, son influence reste tangible dans chaque framework moderne, chaque starter kit, chaque design system.

Avec lui, le reset destructeur a cédé la place à une collaboration éclairée avec le navigateur, et le web n’a plus jamais été le même.

IV. Une base CSS moderne : de la compatibilité à l’expérience utilisateur

1. Deux décennies de transformations

Depuis plus de 20 ans, les bases CSS ont connu deux grandes phases :

• Une période de resets radicaux, visant à effacer tous les styles par défaut des navigateurs pour obtenir un terrain neutre.
• Puis une période de normalisation, amorcée avec normalize.css, qui privilégie la cohérence sans sacrifier les comportements natifs utiles.

Ces pratiques ont structuré les projets front-end pendant des années, apportant stabilité et prévisibilité à l’affichage, malgré les divergences entre navigateurs.

Mais aujourd’hui, les moteurs modernes (Blink, WebKit, Gecko) offrent des comportements de plus en plus homogènes. Les resets radicaux ne sont plus indispensables, les bugs historiques ont disparu et les incohérences se sont raréfiées.

2. Une base hybride : entre héritage et nouveaux besoins

Les bases CSS actuelles ne sont ni totalement neutres, ni totalement stylisées. Elles combinent souvent :

• Des suppressions classiques issues des resets,
• Des règles inspirées de normalize.css,
• Et des améliorations UX discrètes, comme :
  • Le respect des préférences utilisateurs,
  • Une typographie lisible par défaut,
  • Des styles de focus explicites.

Ce patchwork est devenu une norme de fait. Mais il est rarement documenté ou unifié : chaque équipe adapte sa propre "base", créant une fragmentation croissante.

3. D’une base neutre à une base ergonomique

Pendant longtemps, une base CSS devait être invisible. Elle ne devait ni styliser ni suggérer d’intention graphique, juste « nettoyer » l’interface.

Mais ce minimalisme a souvent abouti à l’effet inverse :

• Des interfaces sans hiérarchie, sans contraste, sans repères.
• Des titres qui ressemblent à des paragraphes, des boutons invisibles, une navigation floue.

Aujourd’hui, les attentes ont évolué, une base CSS doit garantir une utilisabilité immédiate, avant même toute personnalisation. Cela implique :

• Des titres clairement distincts,
• Des formulaires lisibles,
• Des boutons reconnaissables,
• Un focus visible.

La base CSS devient ainsi un socle ergonomique, presque un mini design system, qui structure l’interface avant même que le design ne commence.

4. L’accessibilité : une responsabilité dès la base

De nombreuses bases historiques ont fragilisé l’accessibilité sans s’en rendre compte :

• Suppression des outlines de focus,
• Écrasement des hiérarchies typographiques,
• Retrait des guillemets de citation,
• Ignorance des préférences utilisateur.

Aujourd’hui, ces omissions ne sont plus acceptables. Une base CSS moderne doit :

• Préserver le focus (via :focus-visible ou autre),
• Maintenir une structure typographique logique (titres, paragraphes, listes),
• Remplacer les styles supprimés par des équivalents accessibles,
• Respecter les préférences utilisateurs, via les media queries adaptées.

L’accessibilité n’est plus une couche en plus, c’est un critère de conception de base.

5. Une esthétique fonctionnelle, pas un design imposé

Pendant des années, styliser un élément dans une base CSS était mal vu : ce n’était pas "neutre". Mais cette opposition entre neutralité et utilité devient obsolète.

Une esthétique fonctionnelle minimale peut améliorer considérablement l’expérience :

• line-height: 1.5 pour la lisibilité,
• max-width sur les paragraphes pour éviter les lignes trop longues,
• cursor: pointer sur les éléments cliquables,
• Transitions douces sur les états :hover ou :focus.

Ce n’est pas imposer un style, c’est offrir un point de départ clair et sain, que l’on peut enrichir ou écraser facilement.

6. Une base CSS centrée sur l’usage

En 2025, ce qu’on attend d’une base CSS est simple : L’interface est-elle déjà utilisable avant même d’ajouter un design ? Si ce n’est pas le cas, alors la base n’a pas rempli sa mission.

Les nouvelles bases ne se contentent plus d’être neutres : elles assument un rôle ergonomique. Elles font partie de l’expérience. Elles intègrent la logique des design systems. Elles anticipent les usages réels. Elles ne brillent pas, mais elles solidifient.

Une base CSS moderne n’est plus un simple outil de compatibilité. C’est un fondement ergonomique discret, qui rend l’interface fiable, lisible, et accessible, même sans style ajouté. Elle ne saute pas aux yeux, mais elle se ressent à l’usage.