Créer un site correct avec un minimum de CSS (2023)

(thecascade.dev)

6 points par GN⁺ 2025-10-07 | 1 commentaires | Partager sur WhatsApp

De nombreux développeurs rencontrent des problèmes inutiles à cause d'une conception CSS excessivement complexe
Il est possible de créer des pages suffisamment propres et responsives avec seulement quelques styles globaux minimaux
De simples limitations de taille et un affichage en bloc pour les éléments image, SVG et vidéo permettent de résoudre les problèmes de mise en page de base
L'utilisation de la police system-ui, d'un interligne approprié et d'une largeur maximale des paragraphes améliore la lisibilité
Il est nécessaire d'appliquer la propriété de schéma de couleurs pour prendre en compte les préférences de l'environnement, comme le mode sombre du système d'exploitation

Créer un site correct avec un minimum de CSS

Le problème d'un CSS excessif et l'approche à adopter

Beaucoup de gens rendent la conception CSS inutilement trop complexe lorsqu'ils créent un site web
Avec un minimum de CSS, on peut tout à fait produire une page responsive, soignée et fidèle aux fondamentaux

HTML de base et gestion des images

Même avec un HTML de base, un site offre déjà une réactivité élémentaire
Les images peuvent provoquer des problèmes de débordement dans la mise en page, d'où l'application du CSS ci-dessous
```
img {
  max-width: 100%;
  display: block;
}
```
Si des problèmes similaires apparaissent avec les éléments SVG et video, on peut étendre la règle comme suit
```
img,
svg,
video {
  max-width: 100%;
  display: block;
}
```

Améliorer la typographie

La police par défaut du navigateur peut facilement paraître un peu fade sur le plan du design
En utilisant system-ui comme famille de police, on peut appliquer la police système adaptée à chaque plateforme
Comme la taille de police et l'interligne par défaut ont tendance à être un peu trop petits, il est recommandé d'utiliser le réglage suivant
```
body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}
```
Ce seul réglage apporte déjà une amélioration notable par rapport aux valeurs par défaut du navigateur

Prise en charge du mode sombre

Comme de nombreux utilisateurs préfèrent le mode sombre, il est utile d'appliquer la propriété color-scheme pour suivre les réglages du système d'exploitation
```
html {
  color-scheme: light dark;
}
```
Cette propriété permet aux styles de l'user agent de refléter automatiquement le thème préféré du système
On peut aussi la définir via un attribut sur la balise HTML
```
<html lang="en" color-scheme="light dark"></html>
```
Au-delà de la préférence système, permettre à l'utilisateur de choisir directement le schéma de couleurs est également une bonne best practice

Limiter la largeur du contenu

La longueur des paragraphes est un élément important qui influe fortement sur la lisibilité
En général, il est idéal de régler le contenu principal pour afficher 45 à 90 caractères par ligne
Comme ci-dessous, on peut améliorer la lisibilité des paragraphes en limitant la largeur maximale de l'élément main
```
main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}
```
La fonction min() choisit la plus petite valeur entre 70ch et 100% - 4rem
margin-inline: auto permet un centrage horizontal
Selon les besoins, on peut utiliser une classe .container ou .wrapper à la place de main

Exemple final de CSS minimal

En réunissant les éléments ci-dessus, on peut construire un site stable avec l'ensemble CSS minimal suivant

html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

Conclusion et extensibilité

L'exemple ci-dessus peut être utilisé immédiatement comme point de départ léger ou pour une petite page
Dans la plupart des cas, il est préférable d'ajouter des styles supplémentaires sur cette base pour l'étendre

1 commentaires

GN⁺ 2025-10-07

Avis Hacker News

C’est un vieil article, mais il résume pourquoi la famille de polices system ui reste déconseillée dans certaines régions
https://infinnie.github.io/blog/2017/systemui.html
- Le contenu de l’article était intéressant, mais les ligatures st de la police sont tellement désagréables à voir que je n’ai pas envie de recevoir des conseils de typographie de ce site
Honnêtement, je ne comprends pas très bien. Je vois bien l’idée de vouloir créer une page web minimaliste et facile à lire. Mais les méthodes nécessaires pour y arriver ne sont-elles pas déjà assez bien connues ? Je me demande quel est le public cible qui galère avec ça. Et je me demande aussi pourquoi ce contenu est si populaire sur HN
- Moi. Je suis surtout développeur backend et je fais parfois un peu de frontend pour des side projects, mais je ne connais quasiment rien au CSS. Pour moi, ces méthodes ne sont pas « bien connues ». À chaque fois, c’est compliqué parce que je ne maîtrise pas le CSS
- Des gens qui galèrent déjà avec un simple max-width ? La cible, c’est toutes les personnes qui créent une page perso

font-family: System UI;

C’est incorrect. La syntaxe exacte est

font-family: system-ui;

L’auteur l’a écrit correctement dans certains exemples, mais s’est trompé dans le premier, ce qui peut prêter à confusion

Je me demande si un nom de police composé de deux mots doit être mis entre guillemets. Par exemple

font-family: Times New Roman;

comme ça. Comme times et Times New Roman fonctionnent tous les deux sans guillemets, je me demande si c’est un cas particulier lié à une vieille police, ou si le CSS est simplement assez permissif dans la correspondance des noms

https://meyerweb.com/eric/tools/css/reset/
J’ai juste envie d’appeler ça de l’argent en cache
- Eric Meyer est une légende du monde CSS. En 2002, quand je ne comprenais pas le box model, c’est grâce à ses explications que j’ai enfin compris
  https://meyerweb.com/eric/books/
- Je vois souvent ça, mais il y a un je-ne-sais-quoi d’étrange qui ne passe pas bien à mes yeux. Ce n’est ni assez simple, ni vraiment moderne/minimaliste. Et la typo elle-même ne me semble pas très lisible. C’est peut-être juste une question de goût
- Les feuilles de style de reset CSS sont le point de départ de la pollution stylistique. L’approche à la Kevin Powell, qui consiste à respecter les styles par défaut du navigateur, est meilleure. Il faut toujours tester sur plusieurs navigateurs, mais cela fait presque 20 ans que les CSS reset traînent comme une base implicite, puis qu’on ajoute encore des frameworks par-dessus, ce qui ne fait qu’augmenter la complexité. Aujourd’hui, avec CSS Grid, les variables et d’autres outils modernes, on peut sortir de ces anciennes méthodes et adopter des approches bien plus créatives. Avant, je détestais le CSS à cause de tous les bricolages nécessaires, mais maintenant j’ai l’impression d’assembler des LEGO qui s’emboîtent parfaitement. Le CSS reset n’est plus une nécessité absolue, c’est plutôt un outil d’appoint pour se libérer de cette peur. Les préprocesseurs CSS sont eux aussi beaucoup moins nécessaires qu’avant
Quelqu’un demande des recommandations de SSG (static site generator) pour un site académique simple et minimaliste. Astro et Hugo sont des options, mais Astro lui a semblé trop complexe, tandis qu’écrire directement en html/css rend la mise en page et la personnalisation peu pratiques. Les thèmes Astro ne semblent pas non plus très adaptés aux blogs personnels, la plupart étant pensés pour des usages d’entreprise ou très tape-à-l’œil. En se posant ce genre de questions, il est frappé de voir à quel point la conception de sites web est devenue difficile. Il se demande comment les développeurs web arrivent encore à suivre ce rythme entre frameworks, composants et innombrables dépendances
- Je recommande Eleventy(https://11ty.dev/) ou Zola(https://getzola.org/). Ce sont deux outils relativement récents et ils ont tous deux une communauté d’utilisateurs compétents
- C’est la complexité naturelle des systèmes web. La simplicité ne peut pas se maintenir. Malgré tout, je suis reconnaissant envers les standards ouverts et les frameworks utilisables sans licence. Il y a tellement d’options qu’on finit paralysé au moment de choisir
- Le simple fait d’avoir cette discussion masque la honte de l’état actuel du web moderne. En dehors des grands services web comme Facebook, il n’y a presque rien qui ait de la valeur, et c’est embarrassant
- On n’a peut-être pas besoin de plus de choix, mais franklin.jl m’a semblé idéal pour les maths, le code inline et la sobriété
Ce site web lui-même utilise bien plus de CSS que ce qui est proposé dans l’article. On dépasse largement les 300 lignes. Cela dit, cela reste une base correcte pour démarrer
- Merci d’avoir vérifié ça sur mobile. Ce point réduit ma confiance dans ce média. Je vérifierai moi-même plus tard. J’espère malgré tout qu’ils ont bien appliqué les techniques qu’ils présentent
En voyant la recommandation « limitons la largeur du contenu pour améliorer la lisibilité », j’aimerais qu’on évite ça. Peu importe ce que disent les études d’utilisabilité, moi j’aime les grandes largeurs. On peut déjà contrôler la largeur du contenu en redimensionnant simplement le navigateur
- Quand on redimensionne le navigateur, c’est toute la fenêtre qui rétrécit, ce qui rend les choses encore plus pénibles. Par exemple, si l’on veut déplacer vers le centre un texte de 80 colonnes collé au bord gauche, il faut sans cesse ajuster la taille de la fenêtre, ce qui est extrêmement pénible. C’est tellement inconfortable qu’il m’arrive parfois d’écraser moi-même la feuille de style du site. Parfois, j’ai même l’impression qu’il vaudrait mieux lire du texte brut. Ou alors je passe en reader mode pour lire
- Presque toutes les personnes que je connais, dans la tech ou non, gardent en permanence une multitude d’onglets ouverts. La probabilité que chacun de ces onglets ne contienne qu’une seule ligne de texte est de 0 %. J’ai presque l’impression qu’il vaudrait mieux imprimer ça sur une imprimante matricielle et le lire ainsi, plutôt que de redimensionner la fenêtre à chaque fois. J’exagère un peu
- Pour les contenus de type prose, une largeur limitée est préférable. Sur un grand écran, c’est fatigant de balayer toute la ligne des yeux jusqu’au bout
- Le fait que ce commentaire soit celui qui a reçu le plus de votes montre qu’il ne faut pas prendre trop au sérieux les conseils de HN
- Limiter la largeur du contenu, oui. Mais j’en ai assez de l’abus de content-width, des grosses polices et des grands interlignages. Beaucoup de sites utilisent aujourd’hui des polices trop grandes et des espacements de ligne trop larges, ce qui oblige à scroller sans fin. La taille de police par défaut du navigateur est déjà bien adaptée au système, donc mieux vaut la laisser telle quelle et s’en remettre au zoom
Pas besoin de lire l’article : la réponse est évidente. Cette réponse, c’est « 0 »
- Les styles par défaut sont particulièrement pénibles sur mobile, notamment pour la gestion des images. Comme le dit l’article, si l’on veut quelque chose d’« assez joli », partir des valeurs par défaut ne me semble pas si facile
- Par défaut, les navigateurs utilisent une police serif
Avec un CSS reset, il faut encore dans une certaine mesure un minimum d’alignement de base. Si l’on ne cible que des navigateurs sortis au cours des cinq dernières années, un reset populaire, concis et bien nettoyé suffit largement
- Le point essentiel n’est pas l’uniformité du style, mais une base de lecture confortable. Peu importe que l’affichage diffère selon les plateformes ou les navigateurs, du moment que cela reste facile à lire. Il est plus pratique de viser l’utilisabilité de base que la perfection esthétique
- Le reset est surestimé. Dans un cas minimal comme un blog personnel, ce n’est pas très grave si le style varie un peu selon les plateformes. C’est plutôt le réflexe du designer qui pousse à vouloir aligner cela de manière obsessionnelle

img { max-width: 100%; }
Cette règle doit impérativement être utilisée avec height: auto. Sinon, les proportions de l’image sont cassées
img, svg, video { max-width: 100%; }
Dans Chrome 141, le calcul de auto devient incorrect à cause d’un problème de width/height sur des éléments SVG imbriqués. En attendant, il faut utiliser
svg:where(:not(svg svg))
La police system-ui n’est pas un simple substitut à sans-serif. Si l’on utilise une police d’interface système pour le corps du contenu, cela peut devenir presque illisible sur certaines combinaisons OS/langue. Si l’on veut une sans serif, il faut utiliser sans-serif
La taille de police par défaut est légèrement trop petite, donc quelque chose autour de 18~20px (1.25rem) convient bien. Mais sur petit écran, il vaut mieux ne pas dépasser 1rem
On recommande souvent un line-height de 1.5~1.7 par défaut, mais 1.7 est trop large sur petit écran. 1.4~1.5 convient mieux, avec une adaptation possible entre 1.4 et 1.6 selon la taille de l’écran
font-family: System UI;
C’est une erreur de syntaxe évidente. Une simple relecture de la feuille de style permet de le voir immédiatement
Séparer le thème sombre/clair du système et celui du site web est une bonne idée. Firefox suit par défaut le thème du système pour le contenu, et cela peut aussi être configuré manuellement
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
Cela implique au minimum environ 2rem de marge latérale (ou 2rem + 8px en tenant compte de la marge par défaut du body). C’est trop d’espace vide, et l’endroit où c’est appliqué est maladroit. Si on veut l’appliquer à main, il est plus logique d’utiliser un padding, comme ceci

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

Mais en pratique, on a besoin des mêmes marges latérales pour le header et le footer, donc il vaut mieux ajuster la marge du body

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

Cela permet de réduire les marges d’environ 40px à 16px

En pratique, la plupart des ajustements de layout et du peaufinage se règlent avec des media queries. Dans ce cas, au final, le volume de code n’augmente pas vraiment par rapport à un CSS classique bien écrit

Créer un site correct avec un minimum de CSS (2023)