Convention de nommage pour les actifs (images, css, js) ?

Question

J'ai toujours du mal à trouver une bonne convention de dénomination pour les ressources telles que les images, les fichiers js et css utilisés dans mes projets web.

Donc, mon courant serait :

CSS : style-{name}.css
exemples : style-main.css , style-no_flash.css , style-print.css etc.

JS : script-{name}.js
exemples : script-main.js , script-nav.js etc.

Images : {imageType}-{name}.{imageExtension}
{imageType} est l'un de ces

• icône (par exemple, icône en forme de point d'interrogation pour le contenu de l'aide)
• img (par exemple une image d'en-tête insérée par l'intermédiaire de <img /> élément)
• bouton (par exemple, un bouton graphique d'envoi)
• bg (l'image est utilisée comme image de fond dans les css)
• sprite (l'image est utilisée comme image de fond dans css et contient plusieurs "versions")

Des exemples de noms seraient : icon-help.gif , img-logo.gif , sprite-main_headlines.jpg , bg-gradient.gif etc.

Alors, qu'en pensez-vous et quelle est votre convention de dénomination ?

Answer 1

J'ai remarqué que beaucoup de développeurs frontaux s'éloignent de css y js en faveur de styles y scripts parce qu'il y a généralement d'autres choses là-dedans, telles que .less , .styl y .sass ainsi que, pour certains, .coffee . Le fait est que l'utilisation de sélections technologiques spécifiques dans votre choix d'organisation des dossiers est une mauvaise idée, même si tout le monde le fait. Je continuerai à utiliser la norme que je constate chez ces développeurs très respectés :

• src/html
• src/images
• src/styles
• src/styles/fonts
• src/scripts

Et leurs équivalents de construction de destination, qui sont parfois préfixés par dest en fonction de ce qu'ils construisent :

• ./
• images
• styles
• styles/fonts
• scripts

Cela permet à ceux qui veulent regrouper tous les dossiers (plutôt que de sortir un src ) afin de maintenir cette situation et d'associer clairement les choses pour ceux qui se manifestent.

En fait, je vais un peu plus loin et j'ajoute

• scripts/before
• scripts/after

qui sont écrasés en deux main-before.min.js y main-after.min.js des scripts, un pour l'en-tête (avec des éléments essentiels de normalize y modernizr qui doivent courir tôt, par exemple) et after pour la dernière chose dans le corps puisque ce javascript peut attendre. Ces pages ne sont pas destinées à être lues, tout comme la page principale de Google.

S'il y a des scripts et des feuilles de style qu'il est judicieux de minifier et de laisser liés seuls en raison d'une approche particulière de la gestion du cache, cela est pris en compte dans les règles de construction.

De nos jours, si vous n'utilisez pas un processus de construction quelconque, tel que gobler o grognement vous n'atteignez probablement pas la plupart des objectifs de performance centrés sur le mobile que vous devriez envisager.

Answer 2

Je place les fichiers CSS dans un dossier css Javascript en js des images dans images , ... Ajoutez des sous-dossiers comme bon vous semble. Aucune convention de dénomination n'est nécessaire au niveau des fichiers individuels.

Answer 3

/Assets/
  /Css
  /Images
  /Javascript (or Script)
    /Minified
    /Source

C'est la meilleure structure que j'ai vue et celle que je préfère. Avec les dossiers, vous n'avez pas vraiment besoin de préfixer vos CSS etc. avec des noms descriptifs.

Answer 4

Pour les sites de grande taille où les css peuvent définir un grand nombre d'images d'arrière-plan, une convention de dénomination des fichiers pour ces actifs s'avère très pratique pour effectuer des modifications ultérieures.

Par exemple :

[component].[function-description].[filetype]

footer.bkg-image.png
footer.copyright-gradient.png

Nous avons également discuté de l'ajout du type d'élément, mais je ne suis pas sûr que cela soit utile et pourrait être trompeur pour les futurs changements requis :

[component].[element]-[function-description].[filetype]
footer.div-bkg-image.png
footer.p-copyright-gradient.png

Answer 5

Vous pouvez le nommer comme ceci :

/assets/css/ - Pour les fichiers CSS

/assets/font/ - Pour les fichiers de police. (En général, vous pouvez simplement aller sur google fonts pour rechercher des polices utilisables).

/assets/images/ - Pour les fichiers d'images.

/assets/scripts/ ou /assets/js/ - Pour les fichiers JavaScript.

/assets/media/ - Pour les vidéos et les fichiers divers.

Vous pouvez également remplacer le nom du dossier "assets" par "resource" ou "files" et conserver le nom de ses sous-dossiers. Il n'est pas très important d'avoir une structure de dossiers ordonnée comme celle-ci. Le seul élément important est de classer vos fichiers selon leur format, par exemple en créant un dossier "/css/" pour les fichiers CSS ou "/images/" pour les fichiers image.