Skip to main content

ADR 011 : Librairies interfaces graphiques - Utilisation du CSS-in-JS avec React

Contexte​

Les composants React nécessitent des styles encapsulés et dynamiques pour améliorer la maintenabilité et permettre une personnalisation facile en fonction des états ou des propriétés des composants. Plusieurs approches de stylisation sont disponibles, dont le CSS-in-JS, qui associe directement les styles aux composants.

Cette décision vise à évaluer si le CSS-in-JS est adapté aux besoins actuels de l'application.

Décision​

Nous adopterons le CSS-in-JS pour styliser les composants React dans le projet, avec une attention particulière aux bibliothèques populaires comme Emotion.

Motivations​

  1. Encapsulation des Styles :

    • Garantir que chaque composant possède ses styles propres, sans risque de conflits avec d'autres parties de l'application.

  2. Dynamisme :

    • Permet de modifier facilement les styles en fonction des props ou de l'état des composants.

  3. Thématisation :

    • Simplifie l'application de thèmes grâce au support natif des bibliothèques CSS-in-JS.

  4. Portabilité :

    • Facilite le déplacement ou le réemploi de composants avec leurs styles intégrés.

  5. Élimination des Styles Morts :

    • Réduit la complexité en éliminant automatiquement les styles inutilisés.

Inconvénients​

  1. Impact sur les Performances :

    • Le CSS-in-JS injecte dynamiquement des styles dans le DOM, ce qui peut ralentir le rendu initial pour les grandes applications.

  2. Taille du Bundle :

    • Les bibliothèques ajoutent une surcharge au bundle JavaScript.

  3. Débogage Complexe :

    • Les classes générées dynamiquement peuvent rendre le débogage des styles plus difficile.

  4. Compatibilité Organisationnelle :

    • Certaines équipes préfèrent séparer les préoccupations (logique vs présentation), ce qui va à l'encontre de cette approche.

  5. Apprentissage :

    • Nécessite une familiarisation avec de nouvelles bibliothèques, ce qui peut ralentir les nouveaux développeurs.

Options Alternatives​

  1. CSS Modules :

    • Avantage : Encapsulation similaire sans surcharge de runtime.
    • Inconvénient : Moins adapté pour des styles dynamiques.

  2. Utility-first CSS (ex. TailwindCSS) :

    • Avantage : Léger, rapide et adapté aux styles statiques.
    • Inconvénient : Styles parfois verbeux dans le JSX.

  3. CSS traditionnel ou SASS/SCSS :

    • Avantage : Simple et bien connu.
    • Inconvénient : Difficulté à gérer les conflits de styles dans des projets de grande taille.

Conséquences​

  1. Les styles des composants seront gérés directement dans le code React, facilitant l'autonomie des composants.
  2. Les performances seront surveillées, en particulier pour les temps de rendu initial (TTI) des pages.
  3. Une bibliothèque CSS-in-JS sera sélectionnée (par exemple, styled-components ou Emotion), et des directives claires seront établies pour éviter un usage excessif ou inefficace.

Décision Suivante​

Une réévaluation sera effectuée après une première implémentation sur un sous-ensemble de composants pour vérifier l'impact réel sur les performances et la maintenabilité. Si des problèmes significatifs émergent, une alternative comme les CSS Modules sera envisagée.