Nommer ses dossiers et fichiers : évitez les pièges courants

🚫 Les espaces dans les noms

L'erreur numéro un des débutants : mettre des espaces dans les noms de fichiers ou dossiers.

❌ Mes Images/photo de profil.jpg
❌ Scripts JS/fonction principale.js

Pourquoi c'est un problème :

• Les URLs deviennent illisibles : photo%20de%20profil.jpg
• Les commandes en terminal nécessitent des guillemets ou échappements
• Certains serveurs ou outils peuvent mal interpréter les chemins
• Les imports en JavaScript peuvent échouer

// Impossible à importer correctement
import { myFunction } from './Scripts JS/fonction principale.js';

La solution : Utilisez le kebab-case (tirets) ou le snake_case (underscores).

✅ mes-images/photo-de-profil.jpg
✅ scripts-js/fonction-principale.js
✅ my_images/profile_photo.jpg

🚫 Les accents et caractères spéciaux

Les accents, cédilles et autres caractères spéciaux sont à proscrire absolument.

❌ données/factures-février.pdf
❌ images/château.jpg
❌ scripts/validité-données.js

Pourquoi c'est un problème :

• Problèmes d'encodage entre différents systèmes d'exploitation
• Incompatibilités avec certains serveurs ou CDN
• Erreurs dans les URLs et les imports
• Difficultés de recherche et de référencement

La solution : Utilisez uniquement des caractères ASCII non accentués.

✅ donnees/factures-fevrier.pdf
✅ images/chateau.jpg
✅ scripts/validite-donnees.js

🚫 Les caractères interdits

Certains caractères sont tout simplement interdits ou déconseillés dans les noms de fichiers.

❌ data/users&groups.json
❌ images/logo(new).png
❌ docs/guide?.md
❌ files/data*backup.txt

Caractères à éviter :

• < > : " / \ | ? * (interdits sur Windows)
• ( ) [ ] { } (peuvent causer des problèmes dans les shells)
• @ # $ % ^ & * (caractères spéciaux shell)
• ; , (peuvent perturber certains outils)

La solution : Restez simple avec lettres, chiffres, tirets et underscores.

✅ data/users-and-groups.json
✅ images/logo-new.png
✅ docs/guide.md
✅ files/data-backup.txt

🚫 Noms trop vagues

Des noms comme data, temp, test ou utils ne vous aideront pas à vous y retrouver.

❌ Mauvaise organisation :
project/
├── data/
│   └── data/
│       └── data.json
├── temp/
├── test/
└── utils/

Pourquoi c'est un problème :

• Impossible de savoir ce que contient le dossier sans l'ouvrir
• Risque de redondance (data/data/data.json)
• Difficile de retrouver des fichiers spécifiques
• Confusion dans les imports

La solution : Soyez descriptif et spécifique.

✅ Bonne organisation :
project/
├── user-profiles/
│   └── profile-schema.json
├── cache/
│   └── api-responses/
├── tests/
│   └── integration/
└── helpers/
    └── date-formatters.js

🚫 Numérotation inutile

Évitez de numéroter vos fichiers sans raison claire.

❌ Difficile à maintenir :
├── data1.json
├── data2.json
├── data3.json
├── script1.js
├── script2.js
└── test-final-final2.js

Pourquoi c'est un problème :

• Impossible de savoir ce que contient chaque fichier
• Ordre arbitraire qui ne reflète pas la structure logique
• Difficulté à insérer de nouveaux fichiers
• Noms comme final2 montrent un manque d'organisation

La solution : Utilisez des noms descriptifs qui reflètent le contenu.

✅ Structure claire :
├── users-data.json
├── products-data.json
├── orders-data.json
├── validate-form.js
├── fetch-api.js
└── user-authentication.test.js

✅ Cohérence dans tout le projet

Choisissez une convention et respectez-la partout. Le kebab-case est le plus répandu en développement web.

✅ Projet cohérent :
mon-projet/
├── src/
│   ├── components/
│   │   ├── user-card.js
│   │   └── product-list.js
│   ├── utils/
│   │   ├── api-helper.js
│   │   └── date-formatter.js
│   └── styles/
│       ├── main.css
│       └── reset.css
├── assets/
│   ├── images/
│   │   ├── logo-light.svg
│   │   └── logo-dark.svg
│   └── fonts/
└── tests/
    └── user-card.test.js

✅ Noms descriptifs et hiérarchiques

La structure de vos dossiers doit raconter une histoire logique.

✅ Structure logique :
e-commerce/
├── features/
│   ├── authentication/
│   │   ├── login-form.js
│   │   ├── register-form.js
│   │   └── password-reset.js
│   ├── cart/
│   │   ├── cart-items.js
│   │   ├── cart-total.js
│   │   └── checkout-button.js
│   └── products/
│       ├── product-card.js
│       ├── product-details.js
│       └── product-filters.js
└── shared/
    ├── components/
    │   ├── button.js
    │   └── modal.js
    └── hooks/
        └── use-fetch.js

✅ Extensions appropriées

Utilisez toujours les bonnes extensions pour vos fichiers.

✅ Extensions correctes :
├── config.json          # Configuration
├── users.csv            # Données tabulaires
├── api-client.js        # JavaScript
├── styles.css           # Feuille de style
├── component.jsx        # React avec JSX
├── types.ts             # TypeScript
├── readme.md            # Markdown
└── schema.sql           # SQL

Évitez les extensions génériques :

❌ users.txt pour du JSON
❌ script.doc pour du JavaScript
❌ data.file (extension inventée)

✅ Longueur raisonnable

Trouvez le juste milieu entre trop court et trop long.

❌ Trop court :
├── usr.js
├── prd.js
└── img.jpg

❌ Trop long :
├── user-authentication-with-email-verification-and-password-reset.js
└── product-image-with-zoom-and-lightbox-functionality.jpg

✅ Équilibré :
├── user-auth.js
├── product-card.js
└── product-image.jpg

recipe-app/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   ├── images/
│   │   │   ├── recipe-placeholder.jpg
│   │   │   └── logo.svg
│   │   └── fonts/
│   │       └── roboto.woff2
│   ├── components/
│   │   ├── recipe-card.jsx
│   │   ├── ingredient-list.jsx
│   │   └── cooking-timer.jsx
│   ├── pages/
│   │   ├── home.jsx
│   │   ├── recipe-detail.jsx
│   │   └── about.jsx
│   ├── utils/
│   │   ├── api-client.js
│   │   └── format-duration.js
│   ├── styles/
│   │   ├── global.css
│   │   └── variables.css
│   └── index.js
├── tests/
│   └── recipe-card.test.js
├── package.json
├── readme.md
└── .gitignore