HTML CSS JS : bonnes pratiques pour devs

Principes de qualité de code

Avant de parler de langage spécifique, voici les principes universels qui font un bon code :

KISS : Keep It Simple, Stupid

Privilégiez la simplicité. Une solution simple et compréhensible vaut mieux qu'une solution complexe mais "élégante".

DRY : Don't Repeat Yourself

Évitez la duplication. Factorisez le code répétitif en fonctions ou mixins. Plus tard, une modification ne sera à faire qu'une fois.

YAGNI : You Aren't Gonna Need It

Ne codez pas pour des besoins futurs hypothétiques. Implémentez ce dont vous avez besoin maintenant, refactorisez plus tard si besoin.

À retenir : Le code est lu 10 fois plus qu'il n'est écrit. Optimisez pour la lisibilité, pas pour l'égo.

Bonnes pratiques HTML

Sémantique avant tout

Utilisez les balises sémantiques appropriées (nav, main, article, section, header, footer) au lieu de divs génériques.

<!-- ❌ Mauvais -->
<div class="header">
    <div class="nav">...</div>
</div>

<!-- ✅ Bon -->
<header>
    <nav>...</nav>
</header>

Accessibilité dès le départ

Utilisez les attributs alt sur les images, labels sur les formulaires, et ARIA quand nécessaire.

<img src="photo.jpg" alt="Portrait de l'auteur">
<label for="email">Email</label>
<input id="email" type="email">

Attributs essentiels

Type de document : <!DOCTYPE html>
Langue : <html lang="fr">
Charset : <meta charset="UTF-8">
Viewport : <meta name="viewport" content="width=device-width">

Bonnes pratiques CSS

Architecture CSS

Suivez une méthodologie comme BEM (Block, Element, Modifier) ou SMACSS pour une maintenabilité accrue.

<!-- ✅ BEM -->
<button class="btn btn--primary btn--lg">
</button>

<!-- CSS -->
.btn { /* base */ }
.btn--primary { /* variant */ }
.btn--lg { /* size */ }

Sélecteurs performants

Préférez les classes et IDs aux sélecteurs descendants complexes. Évitez les sélecteurs universels (*) en profondeur.

<!-- ❌ Lent -->
body > div > ul li a:hover

<!-- ✅ Rapide -->
.nav-link:hover

Propriétés custom (CSS Variables)

Utilisez les variables CSS pour les couleurs, espacements et valeurs répétitives. Facilite le dark mode et la maintenance.

:root {
    --color-primary: #007bff;
    --spacing-base: 1rem;
}

.btn {
    color: var(--color-primary);
    padding: var(--spacing-base);
}

Mobile First

Commencez par styliser pour mobile, puis ajoutez des media queries pour les écrans plus grands. Plus performant et inclusif.

.container { width: 100%; }

@media (min-width: 768px) {
    .container { width: 750px; }
}

Bonnes pratiques JavaScript

Utiliser const par défaut

const par défaut, let si modification nécessaire, jamais var (legacy). Cela prévient les mutations accidentelles.

<!-- ❌ Éviter -->
var name = "Jean";

<!-- ✅ Préférer -->
const name = "Jean";
let count = 0;
count++;

Arrow Functions et ES6+

Utilisez les features modernes : arrow functions, template literals, destructuring, spread operator.

<!-- ES6+ -->
const users = [{name: "Alice"}, {name: "Bob"}];
const names = users.map(u => u.name);
console.log(`Utilisateurs: ${names.join(", ")}`);

Async/Await plutôt que Promises

Async/await est plus lisible et plus facile à debuguer que les chaînes de .then().

<!-- ✅ Meilleur -->
async function fetchData() {
    try {
        const response = await fetch("/api/data");
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

Avoidez la mutation d'état global

Minimisez les variables globales. Utilisez des modules, classes ou closures pour encapsuler l'état.

<!-- ❌ Mauvais -->
let globalState = {};
function updateGlobal() {
    globalState.value = 42;
}

<!-- ✅ Bon -->
class StateManager {
    constructor() {
        this.state = {};
    }
    update(key, value) {
        this.state[key] = value;
    }
}

Organisation et structure du projet

Une bonne organisation est clé pour un projet maintenable. Voici une structure recommandée :

projet/
├── index.html
├── css/
│   ├── main.css          # Styles globaux
│   ├── variables.css     # Variables CSS
│   └── components/       # Styles des composants
├── js/
│   ├── app.js            # Point d'entrée
│   ├── utils.js          # Fonctions utilitaires
│   └── modules/          # Modules par fonction
├── assets/
│   ├── images/
│   ├── fonts/
│   └── icons/
└── tests/
    └── unit/

Module Pattern

Organisez le code en modules pour éviter les conflits de namespace.

const FormModule = (() => {
    const submitForm = () => { /* ... */ };
    const validateEmail = () => { /* ... */ };

    return {
        submitForm,
        validateEmail
    };
})();

FormModule.submitForm();

Performance web

Lazy Loading pour les images

<img src="image.jpg" loading="lazy" alt="Description">

Minification et bundling

Minifiez CSS et JS en production. Utilisez un bundler (webpack, Vite, esbuild) pour optimiser les assets.

Defer et Async sur les scripts

<!-- Defer : attendre que le DOM soit parsé -->
<script src="app.js" defer></script>

<!-- Async : charger en parallèle, exécuter immédiatement -->
<script src="analytics.js" async></script>

Critical CSS

Inlinisez le CSS critique (above the fold) pour un rendu plus rapide.

Testing et débogage

Tests unitaires

Testez vos fonctions et modules. Utilisez Jest, Mocha ou Vitest selon vos besoins.

// Jest
describe("utils", () => {
    test("addNumbers adds correctly", () => {
        expect(addNumbers(2, 3)).toBe(5);
    });
});

Browser DevTools

Elements : Inspecter et modifier le DOM
Console : Exécuter du code JS et voir les logs
Performance : Profiler et optimiser
Network : Analyser les requêtes HTTP
Application : Gérer cookies, storage, service workers

Source Maps

Utilisez des source maps en développement pour debugger le code original, même minifié.

Outils recommandés

Catégorie	Outil	Usage
Linting	ESLint	Détecte les erreurs JS et applique un style
Linting	Stylelint	Analyse et corrige le CSS
Formatting	Prettier	Formate automatiquement le code
Bundling	Vite / Webpack	Bundle et optimise les assets
Testing	Jest / Vitest	Framework de test unitaire
Version Control	Git / GitHub	Gestion de versions et collaboration
Performance	Lighthouse	Audit performance, SEO, accessibilité