🇫🇷 [CSS] Pourquoi les unités relatives sont un enfer

Lorsque l'on parle de responsivité, on entend souvent dire que les px sont à bannir, et qu'il faudrait privilégier les em et les rem.
Pour vérifier, j’ai demandé à Bard (concurrent de chatGpt ) et voilà le résultat

En général, les unités relatives sont préférables aux unités absolues pour le responsive design, car elles permettent de garantir que le design d'un site web s'adapte à différents écrans et résolutions.

Bon, on vas voir pourquoi bard se trompe et pourquoi cette question et si importante pour la DX de votre projet. Surtout qu’il y a une tendance à sous-estimer l'importance du CSS dans les projets et tout particulièrement la questions des unités. Alors qu'elles sont comme le train d'atterrissage d'un avion : ce n'est pas ce qui te permet de voler, mais si c'est mal pensé, tu vas vite avoir un problème.

Le bordel des unités en css

C'est là que tout commence, car il existe vraiment beaucoup d'unités. En effet, il y a même toute une histoire liée à l'évolution du CSS à travers les technologies et les besoins des utilisateurs.

Aujourd'hui, il est encore possible d'utiliser des unités comme le pt (point) ou le pc (pica), qui proviennent de leur utilisation par les imprimantes il y a 20 ans. Il est important de noter cependant que le px est la seule unité créée et conçue pour le CSS. Cependant, le px est aussi une relique du passé :

Pour avoir une idée de l'apparence du px, prenez un écran cathodique des années 90 : le plus petit point qu'il peut afficher mesure environ 1/100e de pouce (0.25mm) ou un peu plus. L'unité px tire son nom de ces pixels d'écrans.

Et au fil des années, de nouvelles unités ont été ajoutées pour répondre à de nouveaux besoins. C'est ainsi que les unités em, rem, vh et vw ont rejoint la collection. Il est évident que les personnes qui les ont créées avaient une problématique spécifique en tête. Par exemple, sont arrivé très récemment les dvh et les dvw qui répondent aux nouveaux besoins des smartphones. Donc si dans un projet uniquement sur PC vous trouvez des unités dvh ou dvw vous savez que c'est un abus. Ce genre de comportement est plus présent qu'on ne le croit car les raisons d'êtres des polices sont souvent méconnu ou oubliées avec le temps.

L’Intox de l’accessibilité

Avant d'aller plus loin dans le détail du choix des unités, je tiens à remettre en question une légende. Les unités rem et em sont souvent présentées comme étant plus intéressantes pour l'accessibilité. Cet argument était vrai dans le passé ! Ce n'est plus le cas aujourd'hui. En effet, dans les années 2000-2005, la plupart des navigateurs ne s'adaptaient pas aux textes utilisant des unités absolues comme le px. Cependant, les navigateurs modernes s'adaptent désormais à tous les types d'unités, qu'elles soient absolues ou relatives.
Par conséquent, il n'est plus nécessaire d'utiliser des unités responsives pour faciliter l'accessibilité de vos sites.

Les unités responsives

Simplement pour vous rappeler de quoi on parle, et cité les plus courantes.

em	rem	%	vh&vw	ch
La valeur dépend de la taille de la police du parent	La valeur dépend de la taille de la police de l’élément html	L'unité de pourcentage (%) redimensionne un élément en fonction de la taille de son parent.	1% de la hauteur/largeur de la zone d'affichage (viewport)	Relatif a la largeur du caractère ‘0’ de la font-size utilisé dans votre projet

Le problème des em

Cette unité relative à une forte tendance à devenir très vite autre chose que ce que vous aviez prévu. Si je définis une taille de police de 20 px dans mon parent, puis que j'ajoute un enfant avec un autre enfant en dessous, et que chacun d'eux utilise des em, on se retrouve rapidement avec des tailles complètement aléatoires.

Bien que l'utilisation des em pour définir une taille de police en fonction d'une autre taille de police soit acceptable, il est plus problématique de l'utiliser pour définir la taille maximale du container.

Cas d’utilisation des em, vous pouvez les utiliser pour définir la typographie à travers votre projet de manière simplifiée, exemple : “Un titre 1 fait 4 fois la taille d’un paragraphe” ⇒

h1 {
font-size : 4em;
}

Cependant, cela signifie que vous devez avoir les informations de la maquette qui vous indiquent : "tel élément doit être exprimé en fonction de la taille de la police de tel autre élément". Si vous ne disposez pas de ces informations, n'utilisez pas les em !

En effet, nous ne souhaitons pas induire de comportement qui ne soit pas requis par le business. Si le designer ne vous a pas donné de relation proportionnelle à la taille de la police du parent, alors n'utilisez pas les em !

Surtout les cas où les designers ont le temps et les moyens de calculer tout cela à l'échelle d'une application entière sont très rares. Il vaut donc mieux oublier l'utilisation quotidienne des em.

Autre problème, si vous ne changez pas la taille de votre police au niveau de votre parent, alors vous serez simplement en train d’utiliser un multiple de 16px. A ce moment là, pourquoi conserver les em ?

Le risque des rem

La solution pour contrer cette histoire de cascade est d’utiliser les rem. Puisque au lieu d’utiliser la taille de la police du parent, on utilise la taille de la police de l’élément html.

Mais alors du coup, si rien ne change la taille de la police de l'élément HTML, que se passe-t-il ?

En fait, rien. Tous vos développeurs utiliseront un multiple de 16 px, car la taille de police par défaut de l'élément racine est de 16 px. C’est tout, sans forcément qu’ils ne comprennent pourquoi. Cependant, tout le monde aura l'impression de faire du “design responsive”. En soit, nous n’introduisons pas d'erreurs dans le code, mais nous amenons la grande majorité des développeurs à ne pas pouvoir comprendre leur design. C'est comme ajouter une couche de flou supplémentaire au fichier CSS.
En bref, les rem ne doivent être utilisés que si votre designer vous a fourni les règles sur les tailles de police. D'autant plus lorsqu'il s'agit d'exprimer autre chose que la taille de la police avec un multiple d'une taille de police.

La sauce magique em + rem

Bien sûr, le vrai enfer apparaît lorsque l'on mélange les deux. En effet, on ajoute une couche de flou sur des comportements non souhaités. De ce fait, les valeurs n'ont plus aucun sens et les effets de bord sont à leur comble.

Dans cet exemple, personne n'a jamais demandé 9,6 px de marge ou de gap. Pour utiliser correctement les rem et les em ensemble, il faut une maîtrise totale de votre CSS et de votre design. Dans le cas contraire, préparez-vous à devoir ajouter des breakpoints et des !important partout dans votre code pour contrôler les valeurs.
Notez que dans mes exemples, l'effet de cascade n'a que 2 niveaux de profondeur. Cependant, dans une application moderne, on obtient rapidement des profondeurs bien plus élevées.

Mais alors, on met des px partout ?

Bien que cela puisse paraître contre-intuitif, la responsivité ne s'exprime pas à travers les unités. Il est plus important de maîtriser correctement les breakpoints et les layouts.

La taille de vos composants est généralement déterminée par la place que vous leur donnez dans votre layout. L'utilisation de px pour les marges et les paddings ne pose pas de problème. En théorie, 5 px de marge sur un écran de 1080 x 720 px et sur un écran de 400 x 800 px sont presque équivalents. En pratique, on aura plutôt tendance à jouer sur la présence de certains éléments ou leur aspect général, plutôt que sur la taille des marges.

Les marges des éléments restent les mêmes, mais le layout change !

Le choix de l'unité doit toujours être motivé par la production d'un comportement souhaité. L'utilisation des px par défaut n'est pas une mauvaise chose. Au contraire, elle est préférable à toute autre unité relative. Le principal avantage du px, c'est sa simplicité. Bien sûr, il est possible de faire n’importe quoi avec cette unité absolue, mais cela ne vous créera pas de nouvelles erreurs.

Conclusion

Vous l’aurez compris, le but de cet article n'était pas de vous présenter les bonnes pratiques en CSS. Ce n'était pas non plus de vous expliquer le fonctionnement des tailles de police ou des unités. Simplement de vous faire sortir de la tête que l'utilisation des rem ou des em est la clé de la responsivité. Il sera toujours plus simple de rajouter des règles sur des px que de devoir comprendre des rem,em mal placé. Si j'ai réussi ne serait-ce qu'un tout petit peu à vous faire réfléchir sur votre utilisation des polices relatives, alors c'est réussi !
Mort aux rem sans design system, mort aux em sans information business. Il est temps de mettre fin à la ségrégation des px, qui est non seulement injustifiée, mais aussi une source de torture quotidienne.

Source

Voici une suite d’articles très sympas que j’ai utilisés pour produire cette article
when-and-where-to-use-rem-and-em-units-in-web-design
css-unit
Unités Css:em,px,rem...
Comment svh, lvh et dvh peuvent améliorer votre conception réactive