Organiser son code 📁

HTML et CSS

Formation DWWM - Bonnes pratiques d'organisation

2025 - 2026

Au programme aujourd'hui

❌ Le problème : tout mélanger
✅ La solution : séparer et organiser
🎯 Pourquoi c'est important
📁 Comment organiser ses fichiers
🧩 Découper son CSS en modules
💡 Bonnes pratiques professionnelles

❌ Partie 1

Le problème

Pourquoi tout mélanger c'est une mauvaise idée

L'erreur du débutant 🚫

Tout mettre dans un seul fichier HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 500 lignes de CSS ici... */
        body { background: blue; }
        .header { font-size: 2em; }
        .navbar { display: flex; }
        /* ... encore 497 lignes ... */
    </style>
</head>
<body>
    <!-- 1000 lignes de HTML ici... -->
</body>
</html>

⚠️ Résultat : Un fichier de 1500 lignes impossible à gérer !

Imaginez une cuisine 🍳

Scénario 1 - Tout dans un seul tiroir :

Vous mettez les couteaux, fourchettes, cuillères, ouvre-boîtes, économe, fouet, tous ensemble dans le même tiroir. Résultat : vous ne trouvez jamais rien !

Scénario 2 - Organisé en compartiments :

Chaque type d'ustensile a sa place : couteaux ensemble, fourchettes ensemble, etc. Résultat : vous trouvez ce que vous cherchez en 2 secondes !

Les problèmes concrets 😓

Quand tout est mélangé :

🔍 Difficile à trouver : "Où est le CSS du header ?"
😵 Difficile à lire : Faire défiler 1000 lignes
🐛 Difficile à déboguer : Retrouver une erreur
👥 Impossible à plusieurs : Tout le monde modifie le même fichier
♻️ Pas réutilisable : Impossible de reprendre le CSS ailleurs
🐌 Lent : Le navigateur recharge tout à chaque page

Exemple concret du problème

Votre chef vous demande :
"Change la couleur du bouton 'Acheter' sur toutes les pages"

Si tout est mélangé :

❌ Ouvrir 10 fichiers HTML différents
❌ Chercher le bouton dans chaque fichier
❌ Modifier 10 fois le même CSS
❌ Risque d'oublier une page
❌ Temps perdu : 30 minutes

Avec une bonne organisation ✅

Même demande :
"Change la couleur du bouton 'Acheter' sur toutes les pages"

Si le CSS est séparé :

✅ Ouvrir 1 seul fichier CSS
✅ Trouver la classe .btn-acheter
✅ Modifier 1 ligne de code
✅ Tous les boutons sont mis à jour
✅ Temps perdu : 30 secondes !

✅ Partie 2

La solution

Séparer HTML et CSS

Principe de base : La séparation 🎯

                        HTML = Structure (le contenu)

                        "Voici un titre, un paragraphe, un bouton..."

                        CSS = Présentation (l'apparence)

                        "Le titre est en bleu, le bouton est rond..."

💡 Analogie : HTML = le squelette d'une maison, CSS = la peinture et la décoration

Comment séparer ? 📂

Créer un fichier CSS externe

❌ Avant

<head>
    <style>
        body { 
            background: #333; 
        }
    </style>
</head>

✅ Après

index.html :

<head>
    <link rel="stylesheet" 
          href="style.css">
</head>

style.css :

body { 
    background: #333; 
}

Structure de fichiers simple 📁

📁 mon-site/ 📄 index.html 📄 style.css 📁 images/ 🖼️ logo.png 🖼️ banniere.jpg

<!-- Dans index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

Exemple complet avant/après

❌ AVANT - Tout mélangé (1 fichier)

<!DOCTYPE html>
<html>
<head>
    <style>
        .header { background: blue; padding: 20px; }
        .navbar { display: flex; gap: 10px; }
        .button { background: green; color: white; }
    </style>
</head>
<body>
    <header class="header">Mon Site</header>
    <nav class="navbar">...</nav>
</body>
</html>

Après la séparation ✅

index.html - Propre et lisible !

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">Mon Site</header>
    <nav class="navbar">...</nav>
</body>
</html>

style.css - Tout le style au même endroit !

.header { background: blue; padding: 20px; }
.navbar { display: flex; gap: 10px; }
.button { background: green; color: white; }

🎯 Partie 3

Pourquoi c'est important

Les avantages concrets

Avantage 1 : Lisibilité 📖

Fichiers courts et ciblés

✅ HTML = Structure du contenu (facile à lire)
✅ CSS = Styles uniquement (facile à lire)
✅ Pas besoin de faire défiler 1000 lignes
✅ Chaque fichier a un rôle clair

💡 Résultat : Vous comprenez le code en 2 minutes au lieu de 20 !

Avantage 2 : Réutilisation ♻️

Un CSS pour plusieurs pages HTML

<!-- index.html -->
<link rel="stylesheet" href="style.css">

<!-- contact.html -->
<link rel="stylesheet" href="style.css">

<!-- about.html -->
<link rel="stylesheet" href="style.css">

Résultat : Même apparence sur tout le site !
Modifier 1 fichier CSS = tout le site est mis à jour

Avantage 3 : Performance ⚡

Le navigateur met en cache le CSS

Comment ça marche :

L'utilisateur visite index.html
Le navigateur télécharge style.css et le garde en mémoire
L'utilisateur va sur contact.html
Le navigateur réutilise le style.css déjà téléchargé

✅ Résultat : Pages plus rapides à charger !

Avantage 4 : Maintenance 🔧

Facile de corriger ou modifier

Scénario : Bug sur le bouton "Acheter"

❌ Sans séparation : Chercher dans 10 fichiers HTML
✅ Avec séparation : Ouvrir style.css, rechercher .btn-acheter

💡 Temps gagné : De 30 minutes à 30 secondes !

Avantage 5 : Travail en équipe 👥

Plusieurs personnes peuvent travailler en même temps

👤 Développeur 1 : Modifie le HTML (index.html)
🎨 Développeur 2 : Modifie le CSS (style.css)
📸 Designer : Ajoute des images (dossier images/)

✅ Pas de conflit : Chacun travaille sur son fichier !

Avantage 6 : Professionnalisme 💼

C'est la méthode standard dans le monde professionnel

✅ Tous les sites web professionnels sont organisés ainsi
✅ Les frameworks (Bootstrap, Tailwind) utilisent des fichiers CSS séparés
✅ Facilite l'utilisation de préprocesseurs (Sass, Less)
✅ Indispensable pour les gros projets

⚠️ En entretien d'embauche : Un code mal organisé = mauvaise impression

📁 Partie 4

Comment organiser

Structure de dossiers

Structure basique (petit projet) 📂

📁 mon-site/ 📄 index.html 📄 contact.html 📄 style.css 📁 images/ 🖼️ logo.png 🖼️ photo1.jpg

💡 Parfait pour : Sites de 3-5 pages, projets d'apprentissage

Structure intermédiaire 📂

📁 mon-site/ 📄 index.html 📄 contact.html 📁 css/ 📄 style.css 📁 js/ 📄 script.js 📁 images/ 🖼️ logo.png 🖼️ banniere.jpg 📁 fonts/ 📄 MaPolice.ttf

💡 Parfait pour : Projets moyens (5-20 pages)

Lien vers le CSS dans les sous-dossiers

<!-- index.html (à la racine) -->
<head>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
</head>

                        Chemin relatif : css/style.css

                        = "Va dans le dossier css, puis prends style.css"

Structure professionnelle 📂

📁 mon-site/ 📄 index.html 📁 pages/ 📄 contact.html 📄 about.html 📁 assets/ 📁 css/ 📄 style.css 📄 responsive.css 📁 js/ 📄 main.js 📁 images/ 🖼️ logo.svg 📁 fonts/ 📄 Roboto.woff2

Nommage des fichiers 📝

✅ BONS noms :

style.css (simple et clair)
responsive.css (descriptif)
main.js (standard)
logo-entreprise.png (tirets, pas d'espaces)

❌ MAUVAIS noms :

style 2 final vraiment.css (espaces, pas clair)
Styles.CSS (majuscules = problèmes sur serveur Linux)
s.css (trop court, pas descriptif)

Règles de nommage 📏

✅ Minuscules : style.css pas Style.CSS
✅ Tirets pour séparer : mon-style.css
✅ Descriptif : formulaire-contact.css
❌ Pas d'espaces : mon style.css = erreur
❌ Pas d'accents : étudiant.css = problèmes
❌ Pas de caractères spéciaux : style@2024.css

🧩 Partie 5

Découper son CSS

Plusieurs fichiers CSS = encore plus organisé !

Pourquoi plusieurs fichiers CSS ? 🤔

                        Un gros fichier CSS de 2000 lignes

                        = Aussi difficile à gérer qu'un gros HTML !

La solution : Diviser par fonction/zone

🎨 Un fichier pour les couleurs et variables
📐 Un fichier pour le layout général
🧭 Un fichier pour la navigation
📱 Un fichier pour le responsive

Architecture CSS modulaire 🏗️

📁 css/ 📄 main.css (fichier principal - importe les autres) 📄 variables.css (couleurs, tailles, breakpoints) 📄 reset.css (normalisation navigateurs) 📄 layout.css (structure générale + responsive) 📄 components.css (boutons, cards + responsive)

💡 Approche moderne : Les media queries sont intégrés dans chaque fichier, pas séparés !

Exemple : variables.css

/* variables.css - Toutes les variables au même endroit */

:root {
    /* Couleurs */
    --couleur-primaire: #42affa;
    --couleur-secondaire: #ffa07a;
    --couleur-texte: #333;
    --couleur-fond: #f5f5f5;
    
    /* Tailles */
    --taille-petit: 0.8em;
    --taille-normal: 1em;
    --taille-grand: 1.5em;
    
    /* Espacements */
    --espacement-xs: 5px;
    --espacement-s: 10px;
    --espacement-m: 20px;
    --espacement-l: 40px;
    
    /* Breakpoints (mobile-first) */
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
}

Exemple : layout.css

/* layout.css - Structure de la page + responsive */

/* Mobile first (par défaut) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espacement-s);
}

.grid {
    display: grid;
    grid-template-columns: 1fr;  /* Mobile = 1 colonne */
    gap: var(--espacement-m);
}

/* Tablette */
@media (min-width: 768px) {
    .container {
        padding: var(--espacement-m);
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

💡 Media queries intégrés : Tout le CSS du layout au même endroit !

Exemple : components.css

/* components.css - Composants réutilisables + responsive */

/* === BOUTONS === */
.btn {
    padding: var(--espacement-s) var(--espacement-m);
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: var(--taille-normal);
}

.btn-primary {
    background: var(--couleur-primaire);
    color: white;
}

/* Boutons plus grands sur desktop */
@media (min-width: 1024px) {
    .btn {
        padding: var(--espacement-m) var(--espacement-l);
        font-size: var(--taille-grand);
    }
}

/* === CARDS === */
.card {
    background: white;
    padding: var(--espacement-m);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

💡 Tout est regroupé : Les styles ET leur version responsive au même endroit !

Pourquoi intégrer les media queries ? 🤔

❌ Ancienne méthode : responsive.css séparé

Tout le code responsive dans un seul fichier. Problème : pour modifier un composant, il faut ouvrir 2 fichiers !

✅ Méthode moderne : media queries intégrés

Chaque composant a ses media queries. Avantage : tout est au même endroit, facile à maintenir !

💡 Mobile-first : On code d'abord pour mobile, puis on adapte pour tablette et desktop avec @media (min-width: ...)

Exemple concret : Avant / Après

❌ AVANT - Séparé (difficile à maintenir)

components.css :

.card { display: grid; grid-template-columns: repeat(3, 1fr); }

responsive.css (50 lignes plus loin) :

@media (max-width: 768px) {
    .card { grid-template-columns: repeat(2, 1fr); }
}

😵 Pour modifier la card, il faut ouvrir 2 fichiers !

Version moderne ✅

✅ APRÈS - Intégré (facile à maintenir)

components.css :

/* === CARD === */
.card {
    display: grid;
    grid-template-columns: 1fr;  /* Mobile par défaut */
    gap: 20px;
}

/* Tablette */
@media (min-width: 768px) {
    .card {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .card {
        grid-template-columns: repeat(3, 1fr);
    }
}

✨ Tout le CSS de la card au même endroit !

Importer tous les fichiers CSS 📥

Méthode 1 : Dans le HTML

<head>
    <link rel="stylesheet" href="css/variables.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/components.css">
</head>

⚠️ Ordre important ! Variables en premier, puis reset, layout, components

Méthode 2 : @import dans le CSS

main.css (fichier principal)

/* main.css - Importe tous les autres fichiers */
@import url('variables.css');
@import url('reset.css');
@import url('layout.css');
@import url('components.css');

Dans le HTML

<head>
    <link rel="stylesheet" href="css/main.css">
</head>

💡 Avantage : Un seul lien dans le HTML, tout est géré dans main.css !

Comment découper intelligemment ? 🧠

Principe : Regrouper ce qui va ensemble

🎨 Par fonction : variables, reset, layout...
📦 Par composant : boutons, cartes, formulaires...
📄 Par page : accueil, contact, produits...
📱 Par device : mobile, tablette, desktop

⚠️ Ne pas trop découper : 50 fichiers de 10 lignes = trop compliqué !

Exemple de découpage par zone

📁 css/ 📄 main.css (fichier principal - importe tout) 📄 variables.css 📄 reset.css 📄 header.css (+ media queries intégrés) 📄 navigation.css (+ media queries intégrés) 📄 hero.css (+ media queries intégrés) 📄 cards.css (+ media queries intégrés) 📄 footer.css (+ media queries intégrés)

💡 Avantage : Bug dans le header ? Ouvrez header.css, tout y est !

💡 Partie 6

Bonnes pratiques

Pour devenir pro

Règle n°1 : Toujours séparer HTML et CSS ✅

❌ JAMAIS FAIRE :

<div style="color: red; font-size: 20px;">
    Texte
</div>

✅ TOUJOURS FAIRE :

<div class="texte-important">Texte</div>

/* Dans style.css */
.texte-important {
    color: red;
    font-size: 20px;
}

Règle n°2 : Nommer intelligemment 🏷️

❌ Mauvais noms :

.bleu { color: blue; }
.grand { font-size: 20px; }
.box1 { ... }
.div2 { ... }

✅ Bons noms (descriptifs) :

.titre-principal { color: blue; }
.texte-important { font-size: 20px; }
.card-produit { ... }
.header-navigation { ... }

Règle n°3 : Commenter son code 💬

/* ============================
   HEADER
   ============================ */

.header {
    background: var(--couleur-primaire);
    padding: 20px;
}

/* Navigation principale */
.nav-main {
    display: flex;
    gap: 20px;
}

/* ============================
   FOOTER
   ============================ */

.footer {
    background: #333;
    color: white;
}

💡 Pourquoi : Retrouver les sections rapidement

Règle n°4 : Organiser par ordre logique 📊

Ordre recommandé dans style.css :

Variables et configuration
Reset / Normalisation
Styles généraux (body, h1, p...)
Layout (header, main, footer)
Composants (boutons, cards...)
Pages spécifiques
Responsive (media queries)

Règle n°5 : Utiliser les variables CSS 🎨

✅ Avec variables (facile à modifier) :

:root {
    --couleur-primaire: #42affa;
}

.header { background: var(--couleur-primaire); }
.button { background: var(--couleur-primaire); }
.link { color: var(--couleur-primaire); }

Changer la couleur ? Une seule ligne à modifier !

❌ Sans variables (répétition) :

.header { background: #42affa; }
.button { background: #42affa; }
.link { color: #42affa; }

Règle n°6 : Tester sur plusieurs écrans 📱💻

Votre CSS doit fonctionner partout !

📱 Mobile (320px - 480px)
📲 Tablette (768px - 1024px)
💻 Desktop (1280px+)

💡 Outil : F12 dans le navigateur → Mode responsive

Règle n°7 : Versionner son code 📝

Utiliser Git pour sauvegarder vos fichiers

# Initialiser Git
git init

# Ajouter tous les fichiers
git add .

# Créer un commit
git commit -m "Structure HTML/CSS organisée"

# Pousser sur GitHub
git push

💡 Avantage : Historique des modifications, retour en arrière possible

Checklist avant de livrer un projet ✅

☑️ HTML et CSS sont dans des fichiers séparés
☑️ Aucun style inline (pas de style="")
☑️ Les fichiers sont bien organisés en dossiers
☑️ Les noms de fichiers sont en minuscules
☑️ Le code est commenté
☑️ Les variables CSS sont utilisées
☑️ Le responsive fonctionne sur tous les écrans
☑️ Le code est sur Git/GitHub

🎯 Partie 7

Exemples concrets

Avant / Après

Exemple 1 : Site vitrine

❌ AVANT - Tout dans un fichier

📁 site-vitrine/ 📄 index.html (1500 lignes : HTML + CSS) 🖼️ photo1.jpg 🖼️ photo2.jpg

😵 Impossible à maintenir !

Après réorganisation ✅

✅ APRÈS - Organisé

📁 site-vitrine/ 📄 index.html (150 lignes de HTML pur) 📁 css/ 📄 main.css 📄 variables.css 📄 layout.css 📁 images/ 🖼️ photo1.jpg 🖼️ photo2.jpg 🖼️ logo.svg

✨ Clair et professionnel !

Exemple 2 : Site e-commerce

✅ Structure professionnelle

📁 boutique-en-ligne/ 📄 index.html 📁 pages/ 📄 produits.html 📄 panier.html 📄 contact.html 📁 assets/ 📁 css/ 📄 main.css 📄 variables.css 📄 reset.css 📄 layout.css 📄 components.css 📁 js/ 📄 cart.js 📁 images/ 📁 products/ 📁 icons/

Code HTML avant/après

❌ AVANT - Mélangé

<head>
    <style>
        body { background: #f5f5f5; }
        .header { padding: 20px; background: blue; }
        .nav { display: flex; }
        /* 200 lignes de CSS... */
    </style>
</head>

Après séparation ✅

index.html - Propre !

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Site</title>
    <link rel="stylesheet" href="css/main.css">
</head>

css/main.css - Organisé !

@import url('variables.css');
@import url('reset.css');
@import url('layout.css');
@import url('components.css');

Récapitulatif 🎯

Les points essentiels à retenir :

✅ Toujours séparer HTML et CSS
✅ Organiser en dossiers (css/, images/, js/)
✅ Découper le CSS en modules logiques
✅ Utiliser des variables CSS pour les couleurs/tailles
✅ Nommer intelligemment fichiers et classes
✅ Commenter le code pour s'y retrouver
✅ Tester sur plusieurs écrans

Les bénéfices 🌟

Pour vous :

✨ Code plus facile à lire
⚡ Modifications rapides
🐛 Bugs plus faciles à trouver
💼 Professionnalisme

Pour l'équipe :

👥 Travail collaboratif facilité
♻️ Code réutilisable
📚 Documentation claire
🚀 Projet scalable

La règle d'or 🏆

"Un fichier = Une fonction"

HTML pour la structure
CSS pour le style
JavaScript pour l'interactivité

Prochaines étapes 🚀

📝 Réorganisez vos anciens projets
🏗️ Créez une structure type que vous réutiliserez
🎨 Créez votre bibliothèque de composants CSS
📚 Apprenez Sass/SCSS pour aller plus loin
🔧 Découvrez les frameworks (Bootstrap, Tailwind)

Ressources utiles 📚

📖 MDN Web Docs : Standards et bonnes pratiques
🎯 CSS Tricks : Astuces et patterns
💼 GitHub : Regardez du code professionnel
🎨 Codepen : Exemples et inspiration
📚 Smashing Magazine : Articles avancés

Merci ! 👏

Des questions ?

💡 À retenir : Un code bien organisé = Un développeur heureux !