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

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