🇫🇷 [CSS] Pourquoi les unités relatives sont un enfer
Tags: css, beginners, html, french
Published: 2024-03-29 11:41:43

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.

![accident avion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9uppmcvb7e56y5wryjd.jpg)

## 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.


![homer simpson dur de choisir](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l87ll63ltfjmadw6qhap.png)

## 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.

![schema 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orn4iwlsmtx148uh9mh9.png)

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.

![schema 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ia2vy28fzqtsv7ar7ky.png)

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.

![schema 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5bmp104bamhwg9gq3ni.png)

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.

![mobile version of deepl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8f22aw247yjqhb4isegz.png)

![pc version of deepl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc9pu6ruijwm6vedt8je.png)
_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.

![gif de madame qui fait des calculs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzudbo2j2l66etrb74d3.gif)

## 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**.

![podium ou les px arrivent premier et les rem ne sont pas sur le podium](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q48ledmdgfeijz0zb2hi.jpg)

## 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](https://hackernoon.com/when-and-where-to-use-rem-and-em-units-in-web-design)
[css-unit ](https://codesweetly.com/css-unit#:~:text=A)
[Unités Css:em,px,rem...](https://www.w3.org/Style/Examples/007/units.fr.html)
[Comment svh, lvh et dvh peuvent améliorer votre conception réactive](https://flaming.codes/fr/posts/new-dynamic-viewport-sizes-dvh-lvh-svh/)