Skip to Content
DocumentationConventions de codageStyles

Styles

  • Gardez les styles limités au composant ou à la fonctionnalité qui les définit. La plupart des modules O3 importent des fichiers Sass colocalisés tels que user.scss; utilisez .module.scss uniquement dans les packages qui utilisent intentionnellement les modules CSS.

    // user.scss
.container {
  display: flex;
  gap: 1rem;
}
    // user.component.tsx
import styles from './user.scss';
 
return <div className={styles.container}>...</div>;

  • Évitez l’imbrication profonde des styles car cela augmente la spécificité et rend les styles plus difficiles à surcharger. Préférez les sélecteurs plats lorsque c’est possible :

    // ❌ Mauvais : Imbrication profonde
.container {
  .header {
    .title {
      .text {
        color: colors.$gray-100;
      }
    }
  }
}
 
// ✅ Bon : Structure plate
.container {
  display: flex;
}
 
.headerTitle {
  color: colors.$gray-100;
}

  • Évitez d’utiliser des styles globaux car ils peuvent causer des effets secondaires non intentionnés et rendre la base de code plus difficile à maintenir. Au lieu de cela, limitez les surcharges de style sous des noms de classe spécifiques :

    // ❌ Mauvais : Styles globaux affectant toutes les entrées de texte
:global(.cds--text-input) {
  height: 3rem;
  @extend .label01;
}
 
// ✅ Bon : Styles limités à un composant spécifique
.patientSearchInput {
  :global(.cds--text-input) {
    height: 3rem;
    @extend .label01;
  }
 
  // Styles supplémentaires spécifiques au composant
  display: flex;
  gap: 1rem;
}

    Avantages des styles limités :

    • Empêche les fuites de style non intentionnées
    • Rend clair quel composant possède les styles
    • Plus facile à maintenir et déboguer
    • Réduit le risque de conflits de style
    • Meilleure encapsulation des styles de composant

  • Lorsque vous devez surcharger les styles du Carbon Design System :

    1. Essayez d’abord d’utiliser les props et variantes intégrés de Carbon
    2. Si ce n’est pas possible, limitez la surcharge à la classe de votre composant
    3. Documentez pourquoi la surcharge est nécessaire avec un commentaire
    4. Si vous devez surcharger les styles sur plusieurs composants, envisagez d’ajouter une surcharge explicite au fichier _overrides.scss. Cette approche est expliquée dans le conseil suivant.
    .formField {
  // Surcharger l'espacement par défaut de Carbon pour les formulaires denses
  :global(.cds--form-item) {
    margin-bottom: 0.5rem;
  }
 
  // Style personnalisé pour les états de validation
  &.hasError {
    :global(.cds--text-input) {
      border-color: $danger;
    }
  }
}

  • Placez les surcharges de style Carbon dans _overrides.scss . Cela garantit que les surcharges sont appliquées de manière cohérente dans toute l’application.

  • Préférez utiliser les tokens Carbon de couleur , espacement  et type  plutôt que des valeurs codées en dur. Voici quelques exemples d’utilisation de tokens dans le code :

    @use "@carbon/colors";
@use "@carbon/layout";
@use "@carbon/type";
 
.listWrapper {
  margin: layout.$spacing-05; // 1rem
}
 
.resultsCount {
  @include type.type-style("label-01");
}
 
.sortDropdown {
  color: colors.$gray-100;
  gap: 0;
}

    Trouvez une référence utile pour les mappages de tokens de couleur ici .

  • Utilisez les fonctionnalités SASS  comme l’interpolation, les at-rules, les mixins et les fonctions pour rendre vos styles plus réutilisables et maintenables.

  • Si vous voulez appliquer des styles basés sur la taille de la fenêtre d’affichage de l’utilisateur, utilisez nos breakpoints  prédéfinis. Par exemple, pour appliquer différents styles pour les fenêtres d’affichage tablette et bureau, faites ceci :

    // Fenêtres d'affichage tablette
:global(.omrs-breakpoint-lt-desktop) {
  .form {
    height: calc(100vh - 9rem);
  }
}
 
// Fenêtres d'affichage bureau
:global(.omrs-breakpoint-gt-tablet) {
  .form {
    height: calc(100vh - 6rem);
  }
}
    ℹ️

    Assurez-vous de limiter vos styles sous un nom de classe (tel que .form dans l’exemple ci-dessus) pour éviter qu’ils n’affectent d’autres composants.

  • Utilisez la bibliothèque classnames  pour appliquer conditionnellement des styles à un élément, en l’ajoutant d’abord aux dépendances du package si le module ne la déclare pas déjà. Envisagez d’utiliser classnames si vous interpolez plusieurs noms de classe dans une chaîne. Par exemple, l’extrait suivant :

    <NumberInput
  allowEmpty
  className={`${styles.textInput} ${val.className}`}
  // autres props omises pour la brièveté
/>

    Pourrait être remplacé par :

    import classNames from "classnames";
 
<NumberInput
  allowEmpty
  className={classNames(styles.textInput, val.className)}
  // ... autres props omises pour la brièveté
/>;

    L’extrait suivant montre un cas plus avancé - un div stylé avec plusieurs styles conditionnels :

    return (
  <div
    className={`${styles.textInputContainer} ${disabled && styles.disabledInput} ${
      !isWithinNormalRange && styles.danger
    } ${useMuacColors ? muacColorCode : undefined}`}
  >
    // ... détails omis pour la brièveté
  </div>
);

    Vous pouvez refactoriser cet extrait pour utiliser classnames comme suit :

    import classNames from "classnames";
 
const containerClasses = classNames(styles.textInputContainer, {
  [styles.disabledInput]: disabled,
  [styles.danger]: !isWithinNormalRange,
  [muacColorCode]: useMuacColors,
});
 
return <div className={containerClasses}>// ... détails omis pour la brièveté</div>;

  • Soyez prudent lors de l’utilisation de fonctionnalités CSS plus récentes qui n’ont pas de support de navigateur généralisé. Bien que les fonctionnalités CSS modernes puissent être puissantes, nous devons nous assurer que nos applications fonctionnent sur tous les navigateurs supportés. Voici quelques lignes directrices :

    • Vérifiez le support du navigateur sur Can I Use  avant d’utiliser des fonctionnalités CSS plus récentes

    • Envisagez de fournir des alternatives pour les fonctionnalités plus récentes :

      .container {
  // Alternative pour les navigateurs qui ne supportent pas gap
  margin-right: 1rem;
  // Les navigateurs modernes utiliseront gap
  gap: 1rem;
}

    • Soyez particulièrement prudent avec les fonctionnalités encore partielles ou en évolution, comme les nouvelles variantes de requêtes de conteneur, CSS anchor positioning, les view transitions ou d’autres fonctionnalités qui n’ont pas encore atteint un large support dans les navigateurs listés par browserslist-config-openmrs.

    • Préférez des alternatives bien supportées lorsque c’est possible :

      • Utilisez flexbox/grid pour les mises en page de base, sauf si une fonctionnalité plus récente simplifie vraiment le composant
      • Utilisez les requêtes @media ou les requêtes de conteneur de taille lorsqu’elles correspondent au comportement responsive attendu
      • Utilisez des gardes @supports et des alternatives pour les améliorations progressives

    • Testez vos styles sur nos navigateurs supportés :

      • Chrome/Edge (versions les plus récentes)
      • Firefox (version la plus récente)
      • Safari (version la plus récente)
Dernière mise à jour le
ModalesChamps de recherche