Comment bien nommer ses éléments en HTML, CSS et JavaScript

📐 Pourquoi le nommage est important

Bien nommer ses éléments, ça change tout : votre code devient plus lisible, plus maintenable, et vous évitez les erreurs. Comparez :

const x = get(a);

et :

const recipeTitle = getRecipeTitle(recipeId);

Le second est bien plus clair, même sans documentation.

📄 Les styles de nommage en bref

• camelCase : première lettre en minuscule, les suivantes en majuscule (ex : ingredientList)
• PascalCase : chaque mot commence par une majuscule (ex : RecipeCard)
• kebab-case : tous les mots en minuscules séparés par des tirets (ex : recipe-list)
• snake_case : mots en minuscules séparés par des underscores (rarement utilisé en JS)
• UPPER_CASE : pour les constantes globales (ex : MAX_INGREDIENTS)

🔡 Conventions et usages

// Difficile à déchiffrer :
let nbIng = 5;

// Facilite la lecture et la compréhension :
let numberOfIngredients = 5;
let prepareRecipeCard = () => { /* ... */ };

// Peut porter à confusion :
class Rcp { /* ... */ }

// Indique clairement une classe ou un composant :
class RecipeManager { /* ... */ }
class IngredientItem { /* ... */ }

<!-- Moins intuitif à première vue : -->
<div class="ingredientItem">Farine</div>

<!-- Immédiatement compréhensible : -->
<div id="recipe-details">
  <span class="ingredient-item">Farine</span>
</div>

/* Moins intuitif : */
.ingredientItem { /* ... */ }

/* Facilite la lecture : */
.ingredient-item { /* ... */ }

// Un exemple de snake_case :
const default_recipe_category = "dessert";

// Peut sembler être une variable classique :
const tempC = 200;

// Indique clairement une constante fondamentale :
const MAX_INGREDIENTS_PER_RECIPE = 20;
const OVEN_TEMPERATURE_CELSIUS = 180;

🧱 HTML : nommer les IDs et classes

En HTML, le kebab-case est devenu la norme pour les classes et les IDs.

<div id="recipe-list">
    <div class="recipe-card">Chocolate Cake</div>
</div>

• ID → recipe-list ✅
• Class → recipe-card ✅

🎨 CSS : cohérence avec le HTML

En CSS, on suit logiquement les mêmes conventions que le HTML :

#recipe-list {
    padding: 1rem;
}

.recipe-card {
    border: 1px solid #ccc;
    padding: 0.5rem;
}

📜 JavaScript : variables, fonctions, constantes

• Variables → camelCase : ingredientList, recipeTitle
• Fonctions → camelCase : getRecipeTitle(), filterIngredients()
• Constantes → UPPER_CASE : MAX_INGREDIENTS
• Classes → PascalCase : RecipeCard

const MAX_INGREDIENTS = 20;

function getRecipeTitle(recipeId) {
    return recipes.find(r => r.id === recipeId).title;
}

let ingredientList = ['flour', 'sugar', 'eggs'];

🧪 Bonnes pratiques

• Soyez explicite : recipeList plutôt que list
• Restez cohérent dans le projet (évitez de mélanger camelCase et snake_case)
• Évitez les abréviations : ingredientCount plutôt que ingCnt

📌 Résumé par contexte

• ID dans le HTML → kebab-case (ex : main-container)
• Classe CSS / HTML → kebab-case (ex : recipe-card)
• Sélecteurs CSS → identiques aux noms de classes et d’ID HTML
• Variable JavaScript → camelCase (ex : ingredientList)
• Fonction JavaScript → camelCase (ex : getRecipeTitle())
• Constante JavaScript → UPPER_CASE (ex : MAX_INGREDIENTS)
• Classe JavaScript (objet ou composant) → PascalCase (ex : RecipeCard)