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've noticed a lot of frontend developers are moving away from css and js in favor of styles and scripts because there is generally other stuff in there, such as .less, .styl, and .sass as well as, for some, .coffee. Fact is, using specific technology selections in your choice of folder organization is a bad idea even if everyone does it. I'll continue to use the standard I see from these highly respected developers:

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

And their destination build equivalents, which are sometimes prefixed with dest depending on what they are building:

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

This allows those that want to put all files together (rather than breaking out a src directory) to keep that and keeps things clearly associated for those that do break out.

I actually go a bit futher and add

• scripts/before
• scripts/after

Which get smooshed into two main-before.min.js and main-after.min.js scripts, one for the header (with essential elements of normalize and modernizr that have to run early, for example) and after for last thing in the body since that javascript can wait. These are not intended for reading, much like Google's main page.

If there are scripts and style sheets that make sense to minify and leave linked alone because of a particular cache management approach that is taken care of in the build rules.

These days, if you are not using a build process of some kind, like gulp or grunt, you likely are not reaching most of the mobile-centric performance goals you should probably be considering.