Aller au contenu principal

Module Tailwind.8 – Bonnes pratiques

Objectif​

Appliquer les bonnes pratiques Tailwind : lisibilité, organisation, workflow en équipe pour créer du code Tailwind professionnel et maintenable.

Théorie​

Lisibilité​

1. Ordre des classes​

Ordre recommandé :

  1. Layout (display, position)
  2. Flexbox/Grid
  3. Spacing (margin, padding)
  4. Sizing (width, height)
  5. Typography
  6. Colors
  7. Borders
  8. Effects (shadows, etc.)
  9. States (hover, focus)

Exemple :

<button class="
    flex items-center justify-center
    px-4 py-2
    w-full
    text-white font-semibold
    bg-blue-500
    rounded-lg
    shadow-md
    hover:bg-blue-600 focus:ring-2
">
    Bouton
</button>

2. Formatage multi-lignes​

Classes longues :

<button class="
    px-4 py-2
    bg-blue-500 text-white
    rounded hover:bg-blue-600
    focus:ring-2 focus:ring-blue-500
">
    Bouton
</button>

Avantages :

  • ✅ Plus lisible
  • ✅ Plus facile à modifier
  • ✅ Groupes logiques

3. Commentaires HTML​

Pour sections complexes :

<!-- Navigation -->
<nav class="...">
    <!-- Logo -->
    <div class="...">Logo</div>
    
    <!-- Menu -->
    <ul class="...">
        <!-- Items -->
    </ul>
</nav>

Organisation​

1. Extraire les composants​

Quand extraire :

  • Réutilisé 3+ fois
  • Logique complexe
  • Maintenance facilitée

Exemple :

@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
    }
}

2. Groupes logiques​

Organiser par fonctionnalité :

<!-- Header -->
<header class="...">
    <!-- Navigation -->
    <nav class="...">
        <!-- Logo -->
        <div class="...">Logo</div>
        <!-- Menu -->
        <ul class="...">Menu</ul>
    </nav>
</header>

3. Fichiers séparés​

Structure :

components/
├── Button.html
├── Card.html
└── Form.html

Réutilisabilité : Composants dans fichiers séparés.

Workflow en équipe​

1. Conventions​

Nommage :

  • Composants : .btn-primary, .card
  • Utilitaires : Utiliser classes Tailwind
  • Pas de classes custom sauf composants

2. Code review​

Vérifier :

  • Ordre des classes
  • Extraction appropriée
  • Performance (pas trop de classes)
  • Cohérence

3. Documentation​

Documenter :

  • Composants créés
  • Design tokens
  • Patterns utilisés

Bonnes pratiques spécifiques​

1. Éviter les valeurs arbitraires​

❌ Mauvais :

<div class="w-[347px] p-[23px]">Partout</div>

✅ Bon :

// Configurer si réutilisé
theme: {
    extend: {
        width: {
            'custom': '347px',
        }
    }
}

2. Utiliser les variants appropriés​

❌ Mauvais :

<div class="hover:bg-blue-500">Sans raison</div>

✅ Bon :

<button class="hover:bg-blue-600">Bouton interactif</button>

3. Composants vs utilitaires​

Utilitaires :

  • Utilisation unique
  • Simple (2-3 classes)

Composants :

  • Réutilisé
  • Complexe (5+ classes)

4. Responsive mobile-first​

✅ Bon :

<div class="w-full md:w-1/2 lg:w-1/3">

❌ Mauvais :

<div class="lg:w-1/3 md:w-1/2 w-full">

5. Dark mode cohérent​

✅ Bon :

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">

Cohérence : Appliquer dark mode partout où nécessaire.

Anti-patterns​

1. Classes trop longues​

❌ Mauvais :

<div class="flex items-center justify-between px-4 py-2 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
    <!-- 15+ classes sur une ligne -->
</div>

✅ Bon :

<!-- Extraire en composant -->
<div class="card">

2. Répétition excessive​

❌ Mauvais :

<!-- Répété 10 fois -->
<button class="px-4 py-2 bg-blue-500 text-white rounded">Bouton 1</button>
<button class="px-4 py-2 bg-blue-500 text-white rounded">Bouton 2</button>

✅ Bon :

.btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded;
}

3. Mélanger approches​

❌ Mauvais :

<div class="px-4 custom-css-class">
    <!-- Tailwind + CSS custom partout -->
</div>

✅ Bon :

<!-- Tailwind uniquement, ou composants extraits -->
<div class="px-4">

4. Ignorer la configuration​

❌ Mauvais :

<!-- Valeurs arbitraires partout au lieu de configurer -->

✅ Bon :

// Configurer dans tailwind.config.js

5. Pas d'organisation​

❌ Mauvais :

<!-- Tout mélangé, pas de structure -->

✅ Bon :

<!-- Organisé, commentaires, groupes logiques -->

Exercices guidés​

Exercice 1 : Formatage​

Refactorisez du code :

  • Ordre des classes logique
  • Formatage multi-lignes
  • Groupes logiques

Exercice 2 : Extraction​

Identifiez les répétitions :

  • Créez des composants
  • Utilisez @apply
  • Réduisez la duplication

Exercice 3 : Organisation​

Organisez un projet :

  • Structure de fichiers
  • Composants séparés
  • Documentation

Exercice 4 : Conventions​

Établissez des conventions :

  • Nommage
  • Ordre des classes
  • Quand extraire

Exercice 5 : Code review​

Faites un code review :

  • Identifiez les problèmes
  • Corrigez selon bonnes pratiques
  • Améliorez la lisibilité

❌ Erreurs fréquentes​

Erreur 1 : Classes désordonnées​

❌ Mauvais :

<button class="text-white bg-blue-500 px-4 rounded py-2">

✅ Bon :

<button class="px-4 py-2 bg-blue-500 text-white rounded">

Pourquoi : Ordre logique = lisibilité.

Erreur 2 : Pas d'extraction​

❌ Mauvais :

<!-- Répété 20 fois -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">

✅ Bon :

.btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}

Pourquoi : Extraction = maintenabilité.

Erreur 3 : Trop de classes​

❌ Mauvais :

<div class="flex items-center justify-between px-4 py-2 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 focus:ring-2 focus:ring-blue-500">
    <!-- 15+ classes -->
</div>

✅ Bon :

.card {
    @apply flex items-center justify-between px-4 py-2 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 focus:ring-2 focus:ring-blue-500;
}

Pourquoi : Composants = lisibilité HTML.

Erreur 4 : Valeurs arbitraires partout​

❌ Mauvais :

<div class="w-[347px] h-[289px] p-[23px]">

✅ Bon :

// Configurer si réutilisé

Pourquoi : Configuration = cohérence.

Erreur 5 : Pas de conventions​

❌ Mauvais :

<!-- Chaque développeur fait différemment -->

✅ Bon :

<!-- Conventions établies et suivies -->

Pourquoi : Conventions = collaboration facilitée.

🚀 Mini-projet​

Mission : Refactoriser un projet selon les bonnes pratiques

Prenez un projet Tailwind et améliorez-le :

Améliorations :

  1. Ordre des classes logique
  2. Formatage multi-lignes
  3. Extraction de composants
  4. Organisation claire
  5. Documentation

Critères :

  • ✅ Code lisible et organisé
  • ✅ Composants extraits appropriément
  • ✅ Conventions suivies
  • ✅ Documentation complète
  • ✅ Code professionnel

Objectif : Créer du code Tailwind professionnel selon les bonnes pratiques.

Validation : Vous pouvez passer au module suivant quand vous appliquez les bonnes pratiques Tailwind et avez un code professionnel et maintenable.