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: style-{name}.css
examples: style-main.css, style-no_flash.css, style-print.css etc.

JS: script-{name}.js
examples: script-main.js, script-nav.js etc.

Images: {imageType}-{name}.{imageExtension}
{imageType} is any of these

• icon (e. g. question mark icon for help content)
• img (e. g. a header image inserted via <img /> element)
• button (e. g. a graphical submit button)
• bg (image is used as a background image in css)
• sprite (image is used as a background image in css and contains multiple "versions")

Example-names would be: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gif etc.

So, what do you think and what is your naming convention?

Answer 1

I place CSS files in a folder css, Javascript in js, images in images, ... Add subfolders as you see fit. No need for any naming convention on the level of individual files.

Answer 2

The BBC have tons of standards relating web development.

Their standard is fairly simple for CSS files:

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

You might be able to find something useful on their main site:

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

Answer 3

/Assets/
  /Css
  /Images
  /Javascript (or Script)
    /Minified
    /Source

Is the best structure I've seen and the one I prefer. With folders you don't really need to prefix your CSS etc. with descriptive names.

Answer 4

For large sites where css might define a lot of background images, a file naming convention for those assets comes in really handy for making changes later on.

For example:

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

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

We have also discussed adding in the element type, but im not sure how helpful that is and could possibly be misleading for future required changes:

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