La structure des composants visuels suit une organisation par couches :
+---------------------------------------------------------------+
| THEME : nos variables, mixins et fonctions SCSS |
+---------------------------------------------------------------+
| UI-KIT : composants standards hautement réutilisables |
+---------------------------------------------------------------+
| COMPONENTS : features intermédiaires |
+---------------------------------------------------------------+
| SCREENS : écrans non connéctés et sans la nav générale |
+---------------------------------------------------------------+
| ROUTES : routage, hydratation des screens, chargement |
+---------------------------------------------------------------+
- Un élément d’une couche donnée peut importer un élément de même niveau ou de niveau inferieur.
- Un élément d’une couche donnée ne peut jamais importer un élément de niveau supérieur.
- Chaque couche possède un rôle et des règles propres (voir les Readme associés)
- préférer la simplicité quitte à répéter un peu de code
- éviter les abstractions hatives
Garder un code simple et lisible avant tout. Optimiser le code avant de rencontrer des problèmes de performances peut nous faire risquer la lisibilité et la compréhension du code.
Un fichier est une unité de travail, un développeur devrait pouvoir lire un fichier dans sa totalité et comprendre le fonctionnement général. Si il est dificile de mémoriser l’ensemble des règles et fonctionnement d’un fichier, c'est le signe qu'il faut découper.
- Eviter de réutiliser des classes à travers diférents composants
- localiser les styles avec les composants
- créer des composants de mise en page (typographie, boutons, grilles etc...) au lieu de classes globales
- préférer l’usage de variables, mixins ou fonctions pour partager des styles à travers les différents éléments.
À travers l’usage de feuilles de styles globales, il est difficile de déterminer le code utilisé ou mort et de quantifier l’impact d’un changement sur le produit.
Ne pas surcharger un élément depuis la feuille de style d’un parent. Cela crée au sein du code base de nombreux couplages qui peuvent avoir des effets de bord sur le long terme. Préférer des composants et l’usage de props pour créer les variantes nécéssaires. (principe Ouvert/fermé)