Maintenant que les problématiques ont été évoquées, parlons réalité terrain et solutions. Pour rappeler le contexte, nous nous intéressons ici à un projet de taille moyenne, avec une équipe de trois à quatre développeurs et aucun UX/UI designer dédié. La question devient alors : que peut-on faire pour garantir la qualité du style dans notre future application ?
La loi de Gall est particulièrement intéressante lorsque l’on entame l’architecture d’un projet.
On constate invariablement qu’un système complexe qui fonctionne a évolué à partir d’un système simple qui fonctionnait. Un système complexe conçu de toutes pièces ne fonctionne jamais et ne peut être retouché pour le rendre opérationnel. Il faut repartir de zéro avec un système simple qui fonctionne.
Le style de votre application finira forcément par devenir un système complexe : des règles générales sur lesquelles viendront se greffer des reworks, des règles intermédiaires, puis, inévitablement, des exceptions.
Notre objectif est donc de réduire la complexité de ce système à un état suffisamment simple pour pouvoir, plus tard, faire le chemin inverse sans difficulté majeure.
Maintenir la consistance au sein du projet
C’est parti pour un minimum d’architecture en CSS. En trois étapes : gestion des layouts, composants de niveau atomique et propriétés générales.
Concernant les layouts et les composants c’est facile:
- Nous allons utiliser un système hiérarchique ou l’on séparera les composants “page” du “reste”.
- Une page est responsable du layout et de la coordination des informations entre les différents composants qu’elle intègre.
- Un composant, quant à lui, est responsable d’un ensemble cohérent de fonctionnalités, ayant une position définie dans l’interface et une responsabilité commune.
Cette logique sera facile à coupler avec le pattern Container/Presentational.
Ensuite, les composants utilisés dans les pages sont répartis en deux catégories. Cette distinction concerne plus précisément ceux qui sont réutilisés à travers plusieurs pages. Nous appliquons ici les principes de l’atomic design en créant une couche abstraite de composants atomiques.
Become a Medium member
L’objectif est de concevoir des composants simples et réutilisables, destinés à être combinés au sein d’autres composants. Ces « atomes », une fois assemblés, permettent de former des « molécules ». Par exemple : un bouton, une carte ou encore des éléments de formulaire.
Dernier point important, avoir des valeurs de propriétés réutilisable de manière transverse. Elles seront définies au niveau global de l’application. Il y en a 3 qui sont indispensables à un projet :
Ces trois éléments assurent une cohérence à travers l’application. On évite ainsi que chaque développeur ait à se demander quelle typologie est pertinente. Il devient également possible d’associer facilement du sens aux propriétés.
Point d’attention si vous utilisez Tailwind CSS : c’est un outil très puissant qui augmente considérablement la DX mais si son utilisation n’est pas bien encadrée, cette approche pourra nuire à la maintenabilité du projet sur le long terme.
Assurer l’avenir et les modifications
Sans designer, nous pouvons d’ores et déjà oublier l’idée de gérer proprement un changement de taille de police effectué par l’utilisateur. ( Abordé dans l’article précédent si vous ne l’avez pas lu)
- Malheureusement, notre application ne sera pas parfaitement accessible mais il est préférable de se concentrer sur ce qui peut être fait correctement, avec les moyens à notre disposition.
- Pas de modification de la font size par défaut, donc pas de rem : nous utiliserons principalement l’unité px pour toutes les tailles qui ne dépendent pas du layout.
Concernant les unités à utiliser voici une petite synthèse qui pourrait vous être utile :
- Width et height en %/auto, afin de s’adapter à la place que laisse le layout.
- Margin et padding en px, puisque la taille du contenu ne change pas. Cela présente un avantage majeur : des comportements simples, faciles à ajuster par la suite et surtout lisible.
Si ces deux points sont respectés et que l’intégration de votre interface est réalisée minutieusement, vous ne devriez pas avoir de problème à faire scale votre projet et vos ambitions. C’est la fin de ce petit tour d’horizon sur les unités en CSS et pourquoi les maitriser est un véritable enjeux. Deux mots-clés à avoir en tête : consistance et maintenabilité.
Pour relativiser un peu, la majorité de l’environnement web utilise donc souvent sans le savoir une unité basée sur un multiple de 16 px : le rem. Pourtant, cela n’empêche personne de continuer à développer : c’est bien la preuve qu’il est tout à fait possible de concevoir d’excellents produits en utilisant uniquement des pixels.
Et pour vous rassurer sur l’accessibilité, à titre d’exemple, l’outil de suivi de production Jira ne permet pas de modifier la taille de la police de son interface. Même les plus grandes plateformes ne se lancent pas toujours dans ce type de conception. En espérant vous avoir rendu le CSS un peu plus agréables.
Spoiler: le prochain article expliquera ce qu’est un composant et pourquoi c’est magique. À la semaine prochaine !
Top comments (0)