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

user_132728 0
Viewed 75903

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?

naming-conventions
9 Answers

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.

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

user_215740

I tend to avoid anything generic, such as what smdrager suggested. "mysite.main.css" doesn't mean anything at all.

What is "mysite"?? This one I'm working on? If so then obvious really, but it already has me thinking what it might be and if it is this obvious!

What is "Main"? The word "Main" has no definition outside the coders knowledge of what is within that css file.

While ok in certain scenarios, avoid names like "top" or "left" too: "top-nav.css" or "top-main-logo.png".
You might end up wanting to use the same thing elsewhere, and putting an image in a footer or within the main page content called "top-banner.png" is very confusing!

I don't see any issue with having a good number of stylesheets to allow for a decent naming convention to portray what css is within the given file.
How many depends entirely on the size of the site and what it's function(s) are, and how many different blocks are on the site.

I don't think you need to state "CSS" or "STYLE" in the css filenames at all, as the fact it's in "css" or "styles" folder and has an extension of .css and mainly as these files are only ever called in the <head> area, I know pretty clearly what they are.

That said, I do this with library, JS and config (etc) files. eg libSomeLibrary.php, or JSSomeScript.php. As PHP and JS files are included or used in various areas within other files, and having info of what the file's main purpose is within the name is useful.

eg: Seeing the filename require('libContactFormValidation.php'); is useful. I know it's a library file (lib) and from the name what it does.

For image folders, I usually have images/content-images/ and images/style-images/. I don't think there needs to be any further separation, but again it depends on the project.

Then each image will be named accordingly to what it is, and again I don't think there's any need for defining the file is an image within the file name. Sizes can be useful, especially for when images have different sizes.

site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-20x20.png
etc

A good rule to follow is: if a new developer came to the files, would they sit scratching their head for hours, or would they likely understand what things do and only need a little time researching (which is unavoidable)?

As anything like this, however, one of the most important rules to follow is simply constancy!
Make sure you follow the same logic and patterns thoughout all your naming conventions!
From simple css file names, to PHP library files to database table and column names.

user_26321290

This is an old question, but still valid.

My current recommendation is to go with something in this lines:

  • assets (or assets-web or assets-www); this one is intended for static content used by the client (browser)
    • data; some xml files and other stuff
    • fonts
    • images
    • media
    • styles
    • scripts
    • lib (or 3rd-party); this one is intended for code you don't make or modify, the libraries as you get them
    • lib-modded (or 3rd-party-modified); this one is intended for code you weren't expected to modify, but had to, like applying a workaround/fix in the meantime the library provider releases it
  • inc (or assets-server or assets-local); this one is intended for content used server side, not to be used by the client, like libraries in languages like PHP or server scripts, like bash files
    • fonts
    • lib
    • lib-modded

I marked in bold the usual ones, the others are not usual content.

The reason for the main division, is in the future you can decide to server the web assets from a CDN or restrict client access to server assets, for security reasons.

Inside the lib directories i use to be descriptive about the libraries, for example

  • lib
    • jquery.com
      • jQuery
        • vX.Y.Z
    • github
      • [path]
        • [library/project name]
          • vX.Y.Z (version)

so you can replace the library with a new one, without breaking the code, also allowing future code maintainers, including yourself, to find the library and update it or get support.

Also, feel free to organize the content inside according to its usage, so images/logos and images/icons are expected directories in some projects.

As a side note, the assets name is meaningful, not only meaning we have resources in there, but meaning the resources in there must be of value for the project and not dead weight.

user_3658160
user_1444910
Related