web-dev-qa-db-fra.com

Convention de dénomination des actifs (images, css, js)?

J'ai du mal à trouver une bonne convention de dénomination pour les actifs comme 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 ceux-ci

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

Les noms d'exemple 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 ?

naming-conventions
72
Max

Je place les fichiers CSS dans un dossier css, Javascript dans js, images dans images, ... Ajoutez des sous-dossiers comme bon vous semble. Pas besoin de convention de dénomination au niveau des fichiers individuels.

24
lutz

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

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

Et leur destination construit des équivalents, qui sont parfois préfixés avec dest selon ce qu'ils construisent:

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

Cela permet à ceux qui veulent rassembler tous les fichiers (plutôt que de casser un répertoire src) de garder cela et de garder les choses clairement associées pour ceux qui éclatent.

Je vais un peu plus loin et j'ajoute

  • scripts/before
  • scripts/after

Qui se faufilent en deux main-before.min.js et main-after.min.js scripts, un pour l'en-tête (avec les éléments essentiels de normalize et modernizr qui doivent être exécutés tôt, par exemple) et after pour la dernière chose dans le corps depuis que javascript peut attendre. Ceux-ci ne sont pas destinés à la lecture, tout comme la page principale de Google.

S'il existe des scripts et des feuilles de style qui ont du sens à réduire et à laisser liés seuls en raison d'une approche de gestion du cache particulière qui est prise en charge dans les règles de génération.

De nos jours, si vous n'utilisez pas un processus de construction quelconque, comme gulp ou grunt , vous n'atteignez probablement pas la plupart des objectifs de performances centrés sur le mobile que vous devriez probablement envisager.

43
robmuh
. .]

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 votre CSS, etc. avec des noms descriptifs.

12
Chris S

Pour les grands sites où css peut définir de nombreuses images d'arrière-plan, une convention de dénomination de fichier pour ces actifs est très pratique pour apporter des modifications ultérieurement.

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 sais pas à quel point cela est utile et pourrait être trompeur pour les modifications futures requises:

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

Vous pouvez le nommer comme ceci:

/ assets/css/- Pour les fichiers CSS

/ assets/font/- Pour les fichiers de polices. (Généralement, vous pouvez simplement aller dans les polices Google pour rechercher des polices utilisables.)

/ assets/images/- Pour les fichiers Images.

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

/ assets/media/- Pour la vidéo et divers. des dossiers.

Vous pouvez également remplacer "assets" par le nom de dossier "resource" ou "files" et conserver le nom de ses sous-dossiers. Bien avoir une structure de dossiers de commande comme celle-ci n'est pas très important, le seul élément important est que vous n'avez qu'à organiser vos fichiers en fonction de leur format. comme la création d'un dossier "/ css /" pour les fichiers CSS ou "/ images /" pour les fichiers image.

6
Justin

J'ai tendance à éviter tout ce qui est générique, comme ce que suggère smdrager. "mysite.main.css" ne veut rien dire du tout.

Qu'est-ce que "mysite" ?? Celui sur lequel je travaille? Si oui, alors vraiment évident, mais ça me fait déjà penser à ce que cela pourrait être et si c'est si évident!

Qu'est-ce que "Main"? Le mot "principal" n'a pas de définition en dehors de la connaissance des codeurs de ce qui se trouve dans ce fichier CSS.

Bien que cela soit correct dans certains scénarios, évitez également les noms comme "top" ou "left": "top-nav.css" ou "top-main-logo.png".
Vous pourriez finir par vouloir utiliser la même chose ailleurs, et mettre une image dans un pied de page ou dans le contenu de la page principale appelée "top-banner.png" est très déroutant!

Je ne vois aucun problème à avoir un bon nombre de feuilles de style pour permettre une convention de dénomination décente pour décrire ce que CSS est dans le fichier donné.
Le nombre dépend entièrement de la taille du site et de ses fonctions, ainsi que du nombre de blocs différents sur le site.

Je ne pense pas que vous ayez besoin d'indiquer "CSS" ou "STYLE" dans les noms de fichiers css, car le fait qu'il soit dans le dossier "css" ou "styles" et possède une extension de .css Et principalement comme ces fichiers ne sont appelés que dans la zone <head>, je sais très bien ce qu'ils sont.

Cela dit, je le fais avec des fichiers de bibliothèque, JS et config (etc). par exemple libSomeLibrary.php ou JSSomeScript.php. Comme PHP et JS sont inclus ou utilisés dans diverses zones au sein d'autres fichiers, et avoir des informations sur l'objectif principal du fichier dans le nom est utile.

par exemple: Voir le nom de fichier require('libContactFormValidation.php'); est utile. Je sais que c'est un fichier de bibliothèque (lib) et du nom ce qu'il fait.

Pour les dossiers d'images, j'ai généralement images/content-images/ Et images/style-images/. Je ne pense pas qu'il soit nécessaire de séparer davantage, mais encore une fois cela dépend du projet.

Ensuite, chaque image sera nommée en fonction de ce qu'elle est, et encore une fois, je ne pense pas qu'il soit nécessaire de définir le fichier est une image dans le nom de fichier. Les tailles peuvent être utiles, en particulier lorsque les images ont des tailles différentes.

site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-20x20.png
etc

Une bonne règle à suivre est la suivante: si un nouveau développeur venait aux fichiers, resterait-il assis à se gratter la tête pendant des heures, ou comprendrait-il probablement ce que font les choses et n'aurait besoin que d'un peu de temps pour faire des recherches (ce qui est inévitable)?

Cependant, comme quelque chose comme ça, l'une des règles les plus importantes à suivre est simplement constance!
Assurez-vous de suivre la même logique et les mêmes schémas dans toutes vos conventions de dénomination!
Des noms de fichiers css simples, aux PHP aux noms de table et de colonne de base de données.

6
James

Tout d'abord, je me divise en dossiers: css, js, img.

Dans css et js, je préfixe les fichiers avec le nom du projet car votre site peut inclure des fichiers js et css qui sont des composants, cela indique clairement où les fichiers sont spécifiques à votre site ou liés aux plugins.

css/mysite.main.csscss/mysite.main.js

D'autres fichiers peuvent ressembler à

js/jquery-1.6.1.jsjs/jquery.validate.js

Enfin, les images sont divisées par leur utilisation.

  • img/btn/submit.png un bouton
  • img/lgo/mysite-logo.png un logo
  • img/bkg/header.gif un arrière-plan
  • img/dcl/top-left-widget.jpg un élément de décalcomanie
  • img/con/portait-of-something.jpg une image de contenu

Il est important de garder les images organisées car il peut y en avoir plus de 100 et peut facilement être totalement mélangé et nommé de manière confuse.

6
smdrager

La BBC a des tonnes de normes concernant le développement Web.

Leur standard est assez simple pour les fichiers CSS:

http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml

Vous pourrez peut-être trouver quelque chose d'utile sur leur site principal:

http://www.bbc.co.uk/guidelines/futuremedia/

4
James Wiseman

C'est une vieille question, mais toujours valable.

Ma recommandation actuelle est d'aller avec quelque chose dans ces lignes:

  • actifs (ou actifs-web ou actifs-www); celui-ci est destiné au contenu statique utilisé par le client (navigateur)
    • les données; des fichiers xml et d'autres trucs
    • polices
    • images
    • médias
    • styles
    • scripts
    • lib (ou tiers); celui-ci est destiné au code que vous ne créez pas ou ne modifiez pas, les bibliothèques telles que vous les obtenez
    • lib-modded (ou tiers-modifié); celui-ci est destiné au code que vous ne deviez pas modifier, mais que vous deviez, comme appliquer une solution de contournement/correctif en attendant que le fournisseur de bibliothèque le libère
  • inc (ou actifs-serveur ou actifs-locaux); celui-ci est destiné au contenu utilisé côté serveur, ne doit pas être utilisé par le client, comme les bibliothèques dans des langages comme PHP ou les scripts serveur, comme les fichiers bash
    • polices
    • lib
    • lib-modded

J'ai marqué en gras les habituels, les autres ne sont pas du contenu habituel.

La raison de la division principale est qu'à l'avenir, vous pouvez décider de mettre en serveur les ressources Web à partir d'un CDN ou de restreindre l'accès client aux ressources du serveur, pour des raisons de sécurité.

Dans les répertoires lib que j'utilise pour être descriptif sur les bibliothèques, par exemple

  • lib
    • jquery.com
      • jQuery
        • vX.Y.Z
    • github
      • [chemin]
        • [nom de la bibliothèque/du projet]
          • vX.Y.Z (version)

afin que vous puissiez remplacer la bibliothèque par une nouvelle, sans casser le code, permettant également aux futurs responsables du code, y compris vous-même, de trouver la bibliothèque et de la mettre à jour ou d'obtenir de l'aide.

Aussi, n'hésitez pas à organiser le contenu à l'intérieur en fonction de son utilisation, donc les images/logos et images/icônes sont des répertoires attendus dans certains projets.

En guise de remarque, le nom des actifs est significatif, ce qui signifie non seulement que nous avons des ressources, mais aussi que les ressources doivent avoir une valeur pour le projet et non un poids mort.

3
cablop