Autrefois, nous construisions des « Pages ». home.html, about.html, contact.html. Si vous vouliez changer la couleur du bouton, vous deviez éditer 50 fichiers. Aujourd’hui, nous construisons des Systèmes. Brad Frost a inventé le terme Atomic Design. Il présente l’assurance-chômage comme une hiérarchie biologique. Il s’aligne parfaitement avec l’architecture basée sur les composants (React, Vue, Svelte). Si vous ne l’utilisez pas, votre base de code est probablement un véritable gâchis de styles incohérents. Vous copiez des classes CSS au lieu d’importer des composants.

Pourquoi Maison Code en parle

Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de stacks “modernes” construites sans compréhension fondamentale de l’échelle.

Nous abordons ce sujet car il représente un point de pivot critique dans la maturité de l’ingénierie. Une mise en œuvre correcte différencie un MVP fragile d’une plateforme résiliente de niveau entreprise.

Pourquoi Maison Code applique la conception atomique

Nous ne construisons pas de « sites Web ». Nous construisons des « Produits ». Les produits durent 5 ans. Sans système de conception, un produit pourrit. Atomic Design est le vaccin contre « UI Rot ». Cela oblige les développeurs à penser en « modèles » et non en « pages ». Cela nous permet de faire évoluer l’équipe. 10 développeurs peuvent travailler sur la même application sans se marcher sur les pieds.

1. La hiérarchie

Atomes

Les plus petits éléments de base. Ils ne peuvent pas être davantage détruits sans cesser de fonctionner.

Exemples : <Button>, <Input>, <Label>, <Icon>, <ColorSwatch>.

Code :

const Bouton = ({ variante, enfants }) => {
  return <button className={`btn-${variant}`}>{children}</button>
}

Les atomes ont des styles globaux mais aucune logique d’application.

Molécules

Groupes d’atomes liés ensemble pour fonctionner comme une unité.

Exemple : <SearchForm> (Saisie + Bouton).
Exemple : <ProductCard> (Image + Titre + Prix + Bouton).
Philosophie : Faites bien une chose. Une molécule peut avoir un état d’interface utilisateur local (« isOpen »), mais rarement une logique métier.

Organismes

Groupes de molécules réunis pour former une section distincte d’une interface.

Exemple : <En-tête> (Logo + Nav + SearchForm + CartIcon).
Exemple : <ProductGrid> (Liste des ProductCards).
État : les organismes contrôlent souvent « l’État local » ou communiquent avec l’API. Ce sont les composants « Smart ».

Modèles

Objets au niveau de la page qui placent les composants dans une mise en page.

Exemple : <MainLayout> (En-tête + Barre latérale + Contenu + Pied de page).
Contexte : Ils définissent la grille, mais pas le contenu. Ils gèrent la réactivité.

2. Pourquoi cela est important pour la qualité du code

Réutilisabilité

Si vous construisez un bon atome <Button>, vous l’utilisez 1 000 fois. Si vous corrigez un bug dans le bouton (par exemple, en ajoutant une icône de chargement), vous le corrigez instantanément à 1 000 endroits. Il s’agit de L’effet de levier.

Cohérence

(Voir Cohérence de la marque). Les développeurs n’ont pas à deviner « De quel remplissage ce bouton a-t-il besoin ? ». Ils importent simplement <Button>. Le Design System applique les règles de la marque. Il n’y a pas de « pixels indésirables ».

Découplage de la logique et de la vue

Atomes/Molécules : composants “stupides”. Ils prennent des accessoires (« titre », « image ») et restituent l’interface utilisateur. Ils ne savent rien de votre API.
Organismes/Pages : conteneurs “intelligents”. Ils récupèrent les données (useQuery) et les transmettent. Cela facilite les tests. Vous pouvez tester l’interface utilisateur via Storybook sans vous moquer de l’API.

3. Implémentation : structure des répertoires

Ne videz pas tout dans /components. Organiser par logique :

src/
  composants/
    ui/ # Atoms (Bouton, Entrée) - La "base"
    blocs/ # Molécules (ProductCard, Hero)
    sections/ # Organismes (En-tête, Pied de page)
    mises en page/#Modèles
  pages/# Itinéraires

Cette structure indique au nouveau développeur exactement où chercher.

4. Design Tokens : L’ADN

Les atomes ont besoin de valeurs. Couleurs, espacement, typographie. Ce sont des jetons de conception. Stockez-les dans un fichier de configuration (Tailwind Config ou CSS Variables).

:racine {
  --couleur-primaire : #FF5733 ;
  --espacement-md : 16px ;
}

Désormais, votre composant React utilise var(--spacing-md), pas 16px. Si vous souhaitez renommer le site ? Modifiez un fichier. L’ensemble du site est mis à jour. Les jetons sont le contrat entre la conception et l’ingénierie.

5. Le flux de travail du livre d’histoires

Vous ne pouvez pas créer d’atomes dans une page. Il y a trop de bruit. Vous avez besoin d’un “Labo”. Storybook est ce laboratoire. Vous construisez le <Button> de manière isolée. Vous testez tous ses états : hover, disabled, loading, error. Vous vous assurez qu’il est accessible. Ce n’est que lorsqu’il est parfait que vous le mettez dans l’application. Développement piloté : créez d’abord l’interface utilisateur dans Storybook. Connectez-le aux données en second lieu.

6. Le modèle de gouvernance (à qui appartiennent les atomes ?)

Qui est autorisé à modifier le « » ? Si tout le monde le change, ça casse. L’équipe du système de conception. Dans les grandes organisations, des ingénieurs spécifiques possèdent la « bibliothèque d’interface utilisateur ». Les ingénieurs produits consomment la bibliothèque. Si un ingénieur produit a besoin d’une nouvelle variante de bouton, il envoie un PR à la bibliothèque. Il est examiné pour en assurer la cohérence et l’accessibilité. Cela empêche la « dérive des composants ».

6. Le problème de l’organisme (Où dois-je mettre ça ?)

La partie la plus difficile d’Atomic Design est la zone grise. “Est-ce une molécule ou un organisme ?” Règle du code de la maison :

S’il dispose d’une logique métier (appels API, connexion redux), c’est un organisme.
S’il s’agit d’une simple présentation (entrée d’accessoires, sortie d’interface utilisateur), il s’agit d’une Molécule.
S’il contient un organisme, il doit s’agir d’un Modèle ou d’une Page. (Les organismes ne doivent pas contenir d’autres organismes pour éviter le “Prop Drilling Hell”).

7. Tests de régression visuelle (chromatique)

Atomic Design fonctionne mieux avec les tests visuels. Puisque vous disposez d’une bibliothèque d’atomes, vous devez vous assurer qu’ils ne se cassent pas. Nous utilisons Chromatic (par Storybook).

CI/CD crée Storybook.
Chromatic prend des captures d’écran de chaque composant.
Il compare pixel pour pixel avec la branche « principale ».
Si un pixel a changé, la construction échoue. Cela vous donne la confiance nécessaire pour refactoriser CSS. “J’ai modifié le remplissage global. Ai-je cassé le bouton de paiement ?” Chromatic vous le dira.

8. Le site de documentation (hauteur zéro)

Storybook est destiné aux développeurs. Les concepteurs ont besoin de Zeroheight. Il se synchronise avec Figma et Storybook. Il affiche :

La conception (Figma).
Le code (Réagir).
Les choses à faire et à ne pas faire (directives d’utilisation). Il s’agit de la Source unique de vérité. Sans cela, les développeurs et les concepteurs se séparent.

9. Composants composés (Advanced React)

Comment créer des molécules complexes comme un « menu déroulant » ? Passer 50 accessoires (isOpen, onClose, item1, item2) est moche. Utilisez le Modèle de composant composé.

<liste déroulante>
  <Dropdown.Trigger>Ouvrir</Dropdown.Trigger>
  <Menu.Déroulant>
    <Dropdown.Item>Modifier</Dropdown.Item>
    <Dropdown.Item>Supprimer</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Le parent <Dropdown> contient l’état (contexte). Les enfants lisent l’état. Cela garde vos atomes propres et composables.

10. Accessoires de style vs accessoires de thème (conception d’API)

Devriez-vous autoriser style={{ marginTop: 10 }} sur vos Atoms ? Non. Si vous autorisez les styles arbitraires, les développeurs utiliseront des valeurs arbitraires. “J’ai besoin de 13 pixels ici.” Stratégie : restreindre les accessoires au thème. <Box margin="md" color="primary" /> Cela oblige les développeurs à s’en tenir aux Design Tokens. Il supprime la « trappe d’évacuation ». La contrainte engendre la cohérence.

11. Concevoir des jetons dans Tailwind (stratégie de configuration)

Tailwind est Atomic CSS, mais il nécessite Atomic Design. N’utilisez pas de valeurs arbitraires (w-[123px]). Configurez vos jetons dans tailwind.config.js.

thème : {
  couleurs : {
    primaire : "var(--color-primary)", // Mappe vers une variable CSS
  },
  espacement : {
    md : "var(--espacement-md)",
  }
}

Désormais, les développeurs doivent utiliser bg-primary et p-md. Ils ne peuvent physiquement pas utiliser de couleurs hors marque s’ils s’en tiennent à la configuration. Il s’agit de “l’ingénierie des garde-corps”.

12. Conclusion

Atomic Design n’est pas réservé aux designers. C’est le modèle mental de l’ingénierie frontend moderne. Cela transforme le Chaos en Ordre. Il transforme les « Pages » en « systèmes ». Cela vous permet d’expédier plus rapidement, avec une meilleure qualité et avec moins de peur. Commencez à penser en atomes.

### Code spaghetti ? Nous refactorisons les bases de code existantes en architectures atomiques évolutives à l’aide de React et Tailwind.

Architecte mon interface utilisateur. Engagez nos Architectes.