Bien ranger vos css, js et img

Pour nommer le répertoire où sont rangés les visuels d’un projet web, chacun y va de son « /images », « /visuels », « /picture », « /bild », « /foto », etc. au pluriel ou au singulier. C’est bien, c’est varié et ça témoignage de la diversité du monde et, plus localement, de la diversité culturelle de l’équipe intervenant sur le projet. Au risque de s’y perdre, alors que c’est toujours un peu la même chose : le fameux répertoire où sont rangées les images du projet.

Je vous aime bien, gens divers, mais c’est agaçant de devoir tout renommer à chaque projet. Car, comme beaucoup, je ré-utilise du code — une base CSS, un framework — d’un projet à l’autre, et cette diversité des appellations force à renommer les répertoires, certes, mais surtout à changer tous les chemins des fichiers appelés dans les feuilles de styles et partout ailleurs. C’est pénible, source d’oubli et donc d’erreur. Et si, pour éviter ces erreurs bêtes, nous adoptions plutôt une convention de nommage ? D’accord, mais laquelle ?

Nomenclature intuitive

Avant de donner un nom à quelque chose, plutôt que de ré-inventer la roue, regardons autour pour nous inspirer de ce qui existe déjà. Piocher dans la nomenclature courante augmente les chances d’être compris et ce, plus intuitivement.

/css et /js

Qu’est-ce qui identifie le mieux une feuille de style, si ce n’est son extension de fichier ? Pourquoi ne pas donner aux répertoires le nom des types fichiers qu’ils contiennent ? Dès lors, plus d’ambiguïté : lorsque vous croisez un répertoire « /css », vous savez à quoi vous attendre, quelque soit votre langue natale. Idem pour les scripts, rangés dans un dossier nommé comme leur extension : « /js ». De cette façon, tout le monde comprend, même les intervenants extérieurs au projet, même les collaborateurs de langue étrangère et même les débutants qui auront l’intuition de ranger les fichiers toto.css dans « /css », de chercher les toto.js dans « /js ».

/img

Pour les images, ce n’est pas aussi évident, puisqu’il en existe plusieurs formats. Ce serait un peu absurde de les ranger par format de fichier... Mais il y a quelque chose qui revient souvent, autour des images. Trois petites lettres, celles de la balise HTML, sont caractéristiques. Adoptons donc « /img » !

Nomenclature

Voici donc comment nommer les répertoires de l’intégration :

/css

feuilles de styles (avec une extension .css)

/img

images (aux formats .jpg, .gif, .png…)

/js

javascripts (avec une extension .js)

Séparer décoratif et sémantique

Ainsi, tous les fichiers graphiques sont rangés dans un répertoire « /img ». Ceux qui y tiennent vraiment l’arboreront en fonction des formats de fichiers :

/img
    /jpg
    /gif
    /png

Personnellement, je préfère ranger les images selon de leur usage : tous les boutons ensemble, les fonds ensemble, etc. comme ceci :

/img
    /bg
    /btn
    /title
    /…

Les images porteuses de sens (logos, boutons, titres, etc.) doivent être présentes dans la page HTML pour y être pourvues d’une alternative textuelle. Toutes les autres, parce qu’elles sont décoratives (fond, puces, etc.), seront appelées via CSS. Comme elles n’ont pas le même rôle, il est pertinent de les ranger dans des répertoires séparés, comme ceci :

/css
    /img
/img

Il faut aussi séparer les images des médias contribués, factices (pour les besoins de l’intégration) ou réels (sur un site en ligne), qui trouveront leur place dans un répertoire « /upload » ou « /toto », dont le nom est souvent imposé par le système.

Pourquoi séparer ainsi ? parce que cela permet, par exemple, de changer facilement l’habillage graphique du site, en remplaçant le dossier « /css » avec ses images, sans impacter le contenu de la page HTML. Et inversement.

Pour bien faire, les images qui sont regroupées en sprite sont rangées à part, dans un répertoire explicitement nommé « /sprite ». Et n’oublions pas les images insérées via JavaScript, ni les polices. Voici donc mon arborescence de base pour l’intégration :

/css
    /font
    /img
        /sprite
/img
/js
    /img
/upload

Oui, il y a plusieurs répertoires « /img » : chacun est enfant du dossier contenant les fichiers où ces images sont appelées. Ainsi, quelque soit le fichier, les chemins d’appel des images sont toujours formés de la même façon, avec le même niveau de profondeur d’arborescence, par exemple : background: url(img/background.png); dans la feuille CSS et <img src="img/logo.gif" alt="Nom du site"> dans la page HTML. Cohérent et d’autant plus simple, non ?