Réutilisation entre les sites

La réutilisation est un contrat, pas une simple ressemblance visuelle.

Lorsqu’un même composant, une même mise en page, un même partiel, une même règle de contenu ou un même comportement opérationnel apparaît sur plus d’un site, partez d’un patron partagé. Une variation est permise lorsque le besoin fonctionnel est réel, nommé et répétable.

Règle#

Utilisez une seule implémentation partagée lorsque le comportement est le même. Utilisez une variation documentée lorsque le comportement est intentionnellement différent.

Changements visuels axés sur les jetons#

Lorsqu’une décision visuelle partagée change, mettez à jour la source des jetons avant de modifier le CSS d’un composant. Les couleurs, la typographie, l’espacement, les rayons, les bordures, les ombres, le mouvement et les contraintes de mise en page nommées appartiennent au système de jetons lorsqu’ils représentent des décisions réutilisables. Le CSS compose ces jetons dans des sélecteurs, des états et des comportements de composants; il ne devient pas une deuxième source de valeurs visuelles.

Utilisez Implémentation axée sur les jetons pour la frontière, les exceptions et la règle de vérification. Une formule de mise en page ponctuelle peut rester dans le CSS lorsqu’elle décrit une géométrie locale plutôt qu’une valeur visuelle réutilisable.

Réutiliser avant de varier#

  • Privilégiez les partiels, noms de classes et patrons de pages partagés pour les comportements partagés.
  • Renommez un patron lorsqu’il dépasse la première page qui l’a utilisé.
  • Séparez les couleurs, les images et le ton propres à une marque du comportement structurel.
  • Traitez une copie divergente comme temporaire sauf si la différence a un responsable et une raison.
  • Documentez la raison d’une variation à l’endroit où le prochain mainteneur ira la chercher.

Bonne variation#

Une variation est justifiée lorsqu’elle change le travail accompli par le patron :

  • une forme de données différente
  • un modèle d’interaction différent
  • une exigence de confidentialité ou légale différente
  • une expression de marque différente avec le même contrat sous-jacent
  • un état temporaire de migration avec une fin prévue

Mauvaise variation#

Une variation est faible lorsqu’elle reflète seulement le point de départ du travail :

  • un nom propre à la page d’accueil pour un patron de section
  • une copie de mise en page partagée avec seulement des changements de couleur
  • un deuxième partiel parce que le premier était difficile à trouver
  • du JavaScript dupliqué pour la même interaction

Responsabilité#

La page propriétaire porte la règle et sa raison d’être. Les pages liées peuvent la résumer ou y renvoyer, mais elles ne devraient pas créer une deuxième source de vérité.