Convention d'affectation de noms pour les éléments (images, css, js)?

J'ai encore de la difficulté à trouver un bon convention de nommage pour les actifs comme les images, les fichiers css et js utilisé dans mes projets web.

Donc, ma de courant:

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 (e. g. icône de point d'interrogation pour le contenu de l'aide)
  • img e. g. un en-tête de l'image insérée par <img /> élément)
  • bouton (e. g. un graphique de bouton submit)
  • bg (l'image est utilisée comme une image de fond en css)
  • sprite (l'image est utilisée comme une image de fond en css et contient plusieurs "versions")

Exemple-les noms seraient: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gif etc.

Alors, qu'en pensez-vous et qu'est-ce que votre convention de nommage?

InformationsquelleAutor |
  1. 24

    Je place les fichiers CSS dans un dossier css, Javascript dans js, les images dans images, ... Ajouter des sous-dossiers comme bon vous semble. Pas besoin de convention de nommage sur le niveau des fichiers individuels.

    • Je suis en désaccord. Considérez le fait que de nombreux projets ont conventions de nommage. voir jQuery, il utilise <product-name>.<plugin>-<ver.sion>.<filetype>.js, comme jquery-1.4.2.min.js , ou jquery.plugin-0.1.js.
    InformationsquelleAutor
  2. 43

    J'ai remarqué que beaucoup de développeurs frontend s'éloignent de css et js en faveur de styles et scripts car il n'y a généralement d'autres éléments, tels que .less, .styl, et .sass ainsi que, pour certains, .coffee. De fait, l'utilisation de la technologie spécifique des sélections dans le choix de votre dossier d'organisation est une mauvaise idée, même si tout le monde le fait. Je vais continuer à utiliser la norme je vois de ces très respecté développeurs:

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

    Et leur destination construire des équivalents, qui sont parfois le préfixe dest selon ce qu'ils sont de construction:

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

    Cela permet à ceux qui veulent mettre tous les fichiers ensemble (plutôt que de casser un src répertoire) pour garder que et garde les choses clairement associés pour ceux qui ne le sortir.

    J'ai effectivement aller un peu plus loin et ajouter

    • scripts/before
    • scripts/after

    Qui se smooshed en deux main-before.min.js et main-after.min.js scripts, l'un pour l'en-tête (avec les éléments essentiels de normalize et modernizr qui ont à exécuter au début, par exemple) et after pour la dernière chose dans le corps depuis que javascript peut attendre. Ce ne sont pas destinés à la lecture, à l'instar de Google à la page principale.

    Si il y a des scripts et feuilles de style qui ont un sens pour minifier et congé liés seule en raison d'un cache particulier de l'approche de gestion qui est pris en charge dans les règles de génération.

    Ces jours, si vous n'êtes pas à l'aide d'un processus de construction d'une certaine sorte, comme gulp ou grunt, vous ne sont probablement pas d'atteindre la plupart des mobiles centrées sur des objectifs de performance, vous devriez probablement envisager.

    • Sont fichiers de polices (.ttf, .eot, etc.) situés dans des, styles et polices ?
    • C'est la haute idée raisonnable.Merci!!!!
    InformationsquelleAutor
  3. 12
    /Assets/
/Css 
/Images 
/Javascript (ou le Script) 
/Minifiés 
/Source

    Est la meilleure structure que j'ai vu et celui que je préfère. Avec les dossiers que vous n'avez pas vraiment besoin de préfixe de votre CSS, etc. avec des noms descriptifs.

    • J'aime cela, mais je pense que le plus commun dossier racine est "public" ou "contenu".
    • La première fois que j'ai vu cette structure de fichier pour les "Actifs" a été lorsque j'ai fouillé dans Angulaire single page apps. Il est utilisé dans un grand nombre de l'angle de single page app tutoriels là - je l'aime.
    InformationsquelleAutor
  4. 10

    Pour les grands sites où la css peut définir un grand nombre d'images d'arrière-plan, une convention de nommage des fichiers pour les actifs vient vraiment pratique pour faire des modifications plus tard sur.

    Par exemple:

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

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

    Nous avons aussi discuté de l'ajout dans le type de l'élément, mais im pas sûr de la façon utile et pourrait induire en erreur les futurs changements requis:

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

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

    Dans le css et le js, j'ai préfixe des fichiers avec le nom du projet parce que votre site peut inclure des fichiers js et css qui sont des composants, il est clair que lorsque les fichiers sont spécifiques pour votre site, ou concernant les plugins.

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

    Autres fichiers peuvent être comme

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

    Enfin, les images sont divisés 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 décalque de l'élément
    • img/con/portait-of-something.jpg une image de contenu

    Il est important de garder des images organisé car il peut y avoir plus de 100 et peut facilement obtenir totalement mélangés ensemble, et de prêter à confusion-nommé.

    InformationsquelleAutor
  6. 6

    J'ai tendance à éviter tout ce générique, comme ce smdrager suggéré. "monsite.principal.css" ne veut rien dire du tout.

    Ce qui est "monsite"?? Ce que je travaille? Si oui, alors c'est une évidence, mais il a déjà à me demander ce qu'il pourrait être et si c'est ce qui est évident!

    Ce qui est "Principal"? Le mot "Principal" n'a pas de définition en dehors de la codeurs connaissance de ce qui est dans ce fichier css.

    Tout ok dans certains cas, d'éviter des noms comme "haut" ou "gauche" et aussi: "haut-nav.css" ou "top-main-logo.png".

    Vous pourriez vouloir utiliser la même chose ailleurs, et de mettre une image dans un pied de page ou dans la page principale de contenu appelé "top-bannière.png" est très déroutant!

    Je ne vois pas de problème avec le fait d'avoir un bon nombre de feuilles de style pour permettre une vie décente convention de nommage pour dépeindre ce que css est dans le fichier.

    Combien dépend entièrement de la taille du site et ce qu'il a pour fonction(s) sont, et comment de nombreux différents blocs sont sur le site.

    Je ne pense pas que vous avez besoin de faire état de "CSS" ou de "STYLE" dans le css les noms de fichiers, comme le fait que c'est dans "css" ou "styles" du dossier et a une extension de .css et surtout que ces fichiers ne sont jamais appelés dans le <head> zone, je sais assez clairement ce qu'ils sont.

    Cela dit, je le fais avec de la bibliothèque, JS et config (etc) des fichiers. par exemple libSomeLibrary.php ou JSSomeScript.php. PHP et JS fichiers sont inclus ou utilisé dans divers domaines, dans d'autres fichiers, et d'avoir des infos de ce que le fichier principal but est dans le nom est utile.

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

    Pour les dossiers de l'image, j'ai l'habitude images/content-images/ et images/style-images/. Je ne pense pas qu'il doit être tout à la séparation ultérieure, mais encore une fois cela dépend du projet.

    Chaque image sera nommé en fonction de ce qu'il est, et encore, je ne pense pas qu'il soit nécessaire pour définir le fichier est une image dans le nom de fichier. Les tailles peuvent être utiles, notamment quand des images de tailles différentes.

    site-logo-150x150.png

    site-logo-35x35.png

    boutique-caisse-bouton-40x40.png

    boutique-remove-item-20x20.png

    etc

    Une bonne règle à suivre est la suivante: si un nouveau développeur est venu pour les fichiers, auraient-ils s'asseoir se gratter la tête pendant des heures, ou seraient-ils susceptibles de comprendre ce que les choses à faire et seulement besoin d'un peu de temps à la recherche (ce qui est inévitable)?

    Que quelque chose comme cela, cependant, l'une des règles les plus importantes à suivre est tout simplement constance!

    Assurez-vous de suivre la même logique et les modèles thoughout tous vos conventions de nommage!

    De la simple css noms de fichiers, PHP les fichiers de bibliothèque de table de base de données et les noms de colonne.

    • Pour enlever toute ambiguïté pour les tailles d'image, je suis débattre entre site-logo-150w-150h.png, site-logo-w150x150h.png, ou site-logo-150w150h.png - pensées?
    InformationsquelleAutor
  7. 6

    Vous pouvez l'appeler comme ceci:

    /assets/css/Pour les fichiers CSS

    /assets/police/Pour les fichiers de Police. (Essentiellement, vous pouvez simplement aller à google polices de recherche de 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. les fichiers.

    Vous pouvez également remplacer les "actifs" avec la "ressource" ou "fichiers" nom de dossier et de garder le nom de ses sous-dossiers. Bien avoir une ordonnance structure de dossier comme ce n'est pas très important, la seule importante, c'est que vous avez juste à organiser vos fichiers, de par leur format. comme la création d'un dossier "/css/" pour les fichiers CSS ou "/images/" pour les fichiers d'Image.

    InformationsquelleAutor
  8. 4

    La BBC ont des tonnes de normes concernant le développement web.

    Leur niveau est assez simple pour les fichiers CSS:

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

    Vous pourriez être en mesure de trouver quelque chose d'utile sur leur site principal:

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

    InformationsquelleAutor
  9. 3

    C'est une vieille question, mais toujours valide.

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

    • actifs (ou actifs-web ou actifs-www); celui-ci est prévu pour le contenu statique utilisé par le client (navigateur)
      • de données; certains des fichiers xml et d'autres choses
      • polices
      • images
      • médias
      • styles
      • scripts
      • lib (ou de la 3e partie); celui-ci est prévu pour le code, vous n'avez pas de produire ou de modifier, les bibliothèques que vous obtenez
      • lib-modded (ou de la 3e partie-modifié); celui-ci est prévu pour code vous n'avez pas à modifier, mais il a dû, comme l'application d'une solution de contournement/fixer dans le temps la bibliothèque fournisseur libère
    • inc (ou actifs-serveur ou les actifs locaux); celui-ci est prévu pour le contenu utilisé côté serveur, de ne pas être utilisé par le client, comme les bibliothèques, dans des langages comme PHP ou des scripts de serveur, comme bash fichiers
      • polices
      • lib
      • lib-modded

    J'ai marqué en gras les plus habituels, les autres ne sont pas d'habitude de contenu.

    La raison pour laquelle la principale division, est dans le futur, vous pouvez décider de du serveur web actifs à partir d'un CDN ou de restreindre l'accès du client à serveur actifs, pour des raisons de sécurité.

    À l'intérieur de la lib que j'utilise pour être descriptives sur les bibliothèques, par exemple

    • lib
      • jquery.com
        • jQuery
          • vX.Y.Z
      • github
        • [chemin d'accès]
          • [bibliothèque/nom du projet]
            • vX.Y.Z (version)

    de sorte que vous pouvez remplacer la bibliothèque avec un nouveau, sans casser le code, permettant également de futures responsables, y compris vous-même, pour trouver la bibliothèque et le mettre à jour ou obtenir de l'aide.

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

    Comme une note de côté, les actifs nom est significatif, non seulement ce qui signifie que nous avons des ressources, mais sens les ressources, il doit être de valeur pour le projet et non pas un poids mort.

    InformationsquelleAutor