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

Question

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.

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.

/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.

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

You can name it like this:

/assets/css/ - For CSS files

/assets/font/ - For Font files. (Mostly you can just go to google fonts to search for usable fonts.)

/assets/images/ - For Images files.

/assets/scripts/ or /assets/js/ - For JavaScript files.

/assets/media/ - For video and misc. files.

You can also replace "assets" with "resource" or "files" folder name and keep the name of it's subfolders. Well having an order folder structure like this isn't very important the only important is you just have to arrange your files by it's format. like creating a folder "/css/" for CSS files or "/images/" for Image files.

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.