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

Question

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

Demandé el 15 de Janvier, 2010: Quand la question a-t-elle été
11862 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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 ?

Demandé el 15 de Janvier, 2010 par Max

0 votes

Concernant Javascript File Naming Conventions seulement, lire (beaucoup) plus sur stackoverflow.com/questions/7273316/

Commenté el 13 de Novembre, 2014 par Adrien Be

Answer 1

4 Réponses

Answer 2

6voto

James Points 1325

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

C'est quoi "mysite" ?? Celui sur lequel je travaille ? Si c'est le cas, c'est vraiment évident, mais ça me fait déjà penser à ce que ça pourrait être et si c'est si évident !

Qu'est-ce que "Main" ? Le mot "Main" n'a aucune définition en dehors de la connaissance du codeur de ce qui se trouve dans ce fichier css.

Bien que cela soit acceptable dans certains cas, évitez 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 pas d'inconvénient à ce qu'il y ait un grand nombre de feuilles de style pour permettre une convention de dénomination décente afin de décrire ce que sont les css dans un fichier donné.
Le nombre dépend entièrement de la taille du site et de sa ou ses fonctions, ainsi que du nombre de blocs différents sur le site.

Je ne pense pas qu'il soit nécessaire d'indiquer "CSS" ou "STYLE" dans les noms de fichiers css, car le fait qu'ils se trouvent dans le dossier "css" ou "styles" et qu'ils ont une extension de .css et principalement parce que ces fichiers ne sont jamais appelés que dans l'application <head> Je sais très bien ce qu'ils sont.

Cela dit, je le fais avec les fichiers de bibliothèque, JS et de configuration (etc.), par exemple libSomeLibrary.php, ou JSSomeScript.php. Comme les fichiers PHP et JS sont inclus ou utilisés à différents endroits dans d'autres fichiers, il est utile d'avoir des informations sur l'objectif principal du fichier dans son nom.

ex : Voir le nom du fichier require('libContactFormValidation.php'); est utile. Je sais que c'est un fichier de bibliothèque (lib) et, d'après son nom, ce qu'il fait.

Pour les dossiers d'images, j'ai généralement images/content-images/ y images/style-images/ . Je ne pense pas qu'il faille aller plus loin dans la séparation, mais là encore, 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 que le fichier est une image dans le nom du fichier. Les tailles peuvent être utiles, surtout lorsque les images ont des tailles différentes.

site-logo-150x150.png
logo du site-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 arrivait sur les fichiers, resterait-il assis à se gratter la tête pendant des heures, ou comprendrait-il probablement ce que font les choses et n'aurait-il besoin que d'un peu de temps de recherche (ce qui est inévitable) ?

Comme toute chose de ce genre, cependant, l'une des règles les plus importantes à suivre est tout simplement constance !
Veillez à suivre la même logique et les mêmes modèles dans toutes vos conventions de dénomination !
Qu'il s'agisse de simples noms de fichiers css, de fichiers de bibliothèques PHP ou de noms de tables et de colonnes de bases de données.

Répondu el 4 de Décembre, 2013 par James (1325 Points )

0 votes

Pour lever toute ambiguïté sur la taille des images, j'hésite entre site-logo-150w-150h.png , site-logo-w150x150h.png ou site-logo-150w150h.png - des pensées ?

Commenté el 16 de Mars, 2016 par Daniel Sokolowski

Answer 3

6voto

cablop Points 17

Il s'agit d'une vieille question, mais elle reste valable.

Ma recommandation actuelle est d'aller avec quelque chose dans cette ligne :

actifs (ou assets-web ou assets-www) ; celui-ci est destiné au contenu statique utilisé par le client (navigateur)
- données ; quelques fichiers xml et autres
- polices
- images
- médias
- styles
- scripts
- lib (ou tierce partie) ; celui-ci est destiné au code que vous ne faites pas ou ne modifiez pas, les bibliothèques telles que vous les obtenez
- lib-modded (ou 3rd-party-modified) ; cette option est destinée au code que vous n'étiez pas censé modifier, mais que vous avez dû modifier, par exemple en appliquant une solution de contournement/réparation en attendant que le fournisseur de la bibliothèque la mette à disposition.
inc (ou assets-server ou assets-local) ; celui-ci est destiné au contenu utilisé côté serveur, qui ne doit pas être utilisé par le client, comme les bibliothèques dans des langages comme PHP ou les scripts de serveur, comme les fichiers bash.
- polices
- lib
- lib-modded

J'ai marqué en gras les contenus habituels, les autres ne sont pas des contenus habituels.

La raison de cette division principale est qu'à l'avenir, vous pouvez décider de server les actifs web à partir d'un CDN ou de restreindre l'accès des clients aux actifs du serveur, pour des raisons de sécurité.

Dans les répertoires de librairies, j'utilise une description des librairies, par exemple

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

Ainsi, vous pouvez remplacer la bibliothèque par une nouvelle, sans casser le code, ce qui permet é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.

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

Par ailleurs, le nom des actifs est significatif, non seulement parce qu'il signifie que nous avons des ressources, mais aussi parce que ces ressources doivent être utiles au projet et ne pas être un poids mort.

Répondu el 25 de Septembre, 2018 par cablop (17 Points )

0 votes

J'aime beaucoup cette approche, surtout qu'elle est personnalisable, par exemple à l'intérieur des styles vous pouvez placer un dossier sass et un dossier css, cependant dans d'autres réponses ils appellent le dossier styles juste css.

Commenté el 27 de Juillet, 2020 par Pablo-No

Answer 4

6voto

smdrager Points 3034

D'abord, je divise en dossiers : css , js , img .

Dans les fichiers 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 permet de savoir clairement où les fichiers sont spécifiques à votre site, ou relatifs à des plugins.

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

D'autres fichiers pourraient être comme

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

Enfin, les images sont divisées en fonction de leur utilisation.

img/btn/submit.png un bouton
img/lgo/mysite-logo.png un logo
img/bkg/header.gif un fond
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 d'organiser les images car il peut y en avoir plus d'une centaine et elles peuvent facilement être mélangées et porter à confusion.

Répondu el 31 de Mai, 2011 par smdrager (3034 Points )

2 votes

img/con ? Je suppose que vous ne stockez aucun de ces fichiers sur un système basé sur Windows ? Il s'avère que con es un Nom réservé du pilote de périphérique MS-DOS et ne peut être utilisé comme nom de fichier. .

Commenté el 29 de Janvier, 2015 par Matthew T. Baker

0 votes

J'aime bien img comme nom de dossier parce que cela me rappelle que le nom de la balise est également img pas image .

Commenté el 2 de Novembre, 2016 par user949300

Answer 5

4voto

James Wiseman Points 18347

La BBC a des tonnes de normes relatives au développement web.

Leur norme 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/

Répondu el 15 de Janvier, 2010 par James Wiseman (18347 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: