Component Extraction

Définition

Stratégie de factorisation des styles répétitifs en composants (React, Vue) ou en classes @apply. Le composant JS/TS est préféré a @apply.

Analogie

Quand tu répètes la même recette, tu l'écris sur une fiche plutôt que de la réciter a chaque fois.

Exemple de code

// Prefere: composant React
const Button = ({ children }) => (
  <button className="px-4 py-2 bg-blue-500
    text-white rounded hover:bg-blue-600">
    {children}
  </button>
);

Cas d'usage

Éviter la duplication de longues chaînés de classes dans les templates/JSX.

Anti-pattern

Termes liés