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

First, I divide into folders: css, js, img.

Within css and js, I prefix files with the project name because your site may include js and css files which are components, this makes it clear where files are specific for your site, or relating to plugins.

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

Other files might be like

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

Finally images are divided by their use.

• img/btn/submit.png a button
• img/lgo/mysite-logo.png a logo
• img/bkg/header.gif a background
• img/dcl/top-left-widget.jpg a decal element
• img/con/portait-of-something.jpg a content image

It's important to keep images organized since there can be over 100 and can easily get totally mixed together and confusingly-named.