Naming convention for assets (images, css, js)?

Question

I am still struggling to find a good naming convention for assets like images, js and css files used in my web projects.

So, my current would be:

CSS:

Answer 1

This is an old question, but still valid.

My current recommendation is to go with something in this lines:

• assets (or assets-web or assets-www); this one is intended for static content used by the client (browser)
  • data; some xml files and other stuff
  • fonts
  • images
  • media
  • styles
  • scripts
  • lib (or 3rd-party); this one is intended for code you don't make or modify, the libraries as you get them
  • lib-modded (or 3rd-party-modified); this one is intended for code you weren't expected to modify, but had to, like applying a workaround/fix in the meantime the library provider releases it
• inc (or assets-server or assets-local); this one is intended for content used server side, not to be used by the client, like libraries in languages like PHP or server scripts, like bash files
  • fonts
  • lib
  • lib-modded

I marked in bold the usual ones, the others are not usual content.

The reason for the main division, is in the future you can decide to server the web assets from a CDN or restrict client access to server assets, for security reasons.

Inside the lib directories i use to be descriptive about the libraries, for example

• lib
  • jquery.com
    • jQuery
      • vX.Y.Z
  • github
    • [path]
      • [library/project name]
        • vX.Y.Z (version)

so you can replace the library with a new one, without breaking the code, also allowing future code maintainers, including yourself, to find the library and update it or get support.

Also, feel free to organize the content inside according to its usage, so images/logos and images/icons are expected directories in some projects.

As a side note, the assets name is meaningful, not only meaning we have resources in there, but meaning the resources in there must be of value for the project and not dead weight.