Componsents coiffés à sec

Les composants stylisés sont fantastiques pour garder CSS près des composants JavaScript, favorisant le code propre et modulaire. Cependant, les styles répétés sur plusieurs composants peuvent conduire à un ballonnement de code inutile. Cet article explore les stratégies de réduction de la redondance dans les composants stylisés.

Le problème découle des déclarations du CSS dupliquées, même avec de légères variations. Par exemple, les dispositions de Flexbox impliquent fréquemment un code similaire, ne diffère que par les éléments justify-content ou align-items . La création de composants stylés séparés pour chaque variation entraîne un code répétitif.

Considérez cette approche initiale:

 // composant un
const componentOne = Styled.div`
  Affichage: flex;
  Direction flexible: ligne;
  Justify-Content: Flex-Start;
`;

// Composant deux
const composanttwo = styled.div`
  Affichage: flex;
  Direction flexible: ligne;
  justifier-contenu: espace-intermédiaire;
`;

// Composant trois
const Component Three = Styled.div`
  Affichage: flex;
  Direction flexible: ligne;
  justifier-contenu: espace-même;
`;

Cela fonctionne, mais est inefficace. Une meilleure solution consiste à étendre un composant de base:

 // Composant de ligne flexible
const exampleflex = styled.div`
  Affichage: flex;
  Direction flexible: ligne;
`;

// composant un
const ComponentOne = Styled (ExempleFlex) `
  Justify-Content: Flex-Start;
`;

// Composant deux
const ComponentTwo = Styled (ExempleFlex) `
  justifier-contenu: espace-intermédiaire;
`;

// Composant trois
const ComponentTheRe = Styled (ExempleFlex) `
  justifier-contenu: espace-même;
`;

Cette approche est plus propre, plus maintenable et réduit la duplication de code. Les modifications du composant de base ExampleFlex se propage automatiquement à tous les composants d'extension. N'oubliez pas: le composant de base doit être défini avant que les composants ne l'étendent.

Un séchage supplémentaire peut être réalisé en identifiant les styles communs à travers différents éléments d'interface utilisateur. Par exemple, une barre de navigation et un pied de page peuvent partager des dispositions similaires de Flexbox mais diffèrent en alignement. Au lieu de composants séparés, créez un composant de base et étendez-le pour chaque besoin spécifique.

Le as Prop propose un autre outil puissant. Il permet d'appliquer des styles d'un composant à un élément HTML différent. Ceci est utile lorsque les éléments d'interface utilisateur partagent des styles visuels mais ont des fonctionnalités sous-jacentes différentes (par exemple, un bouton et un lien stylé comme un bouton). En définissant un style de base et en utilisant l' as , vous pouvez réutiliser les styles sans duplication de code.

 const Button = Styled.button`
  // Styles de bouton communs
`;

const StyledLink = Styled (Button) .ATTRS ({AS: 'A'}) `
  // Styles spécifiques aux liens (le cas échéant)
`;

En résumé, la combinaison de l'extension des composants et l'hélice as offre une stratégie robuste pour écrire des composants de style sec et maintenables, conduisant à des tailles de faisceaux plus petites et à une maintenance de code plus facile. L'extraction stratégique des styles réutilisables dans les composants de base améliore considérablement l'efficacité du code et la maintenabilité à long terme.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!