In writing code, whether PHP or XHTML/CSS, the constant struggle is to arrange and comment code and peripherals in a fashion that will allow you to easily pick back up and make changes in the future.
One of the aspects of this I’m constantly experimenting with is how to name the images that show up in a site’s structure and template. Basically, when I’m cutting up a layout to convert into code, how should I name the images?
I’ve gone through several different iterations over the last several years but this is the one I’ve been using lately that seems to be the most intuitive:
[what it is]-[where it goes].[extension]
For instance, if I have an image that is a repeating background for the header, the file would be named:
bg-header.png
If the image is the company logo for the header:
logo-header.png
However, if it is a logo of a sister company that gets linked elsewhere:
logo-sister-company.png
I’ve found this is the way my mind works when I’m jumping into a situation where a) I haven’t worked on the site in awhile or b) it’s a site completely unfamiliar that I’m making changes to.
When using naming conventions that center around placement on the site, I run into two issues:
- Placements have diverse names – is it middle or center? Is it bottom or footer? Is it main or content? However in most cases, logo is ‘logo’, background is ‘bg’ (or something very similar), navigation is ‘nav’, etc.
- ‘Where’ can be multiple – sometimes you can use the same image in more than one element of the site i.e. a background for the header and footer. If the file name begins with ‘bg’ it’ll be easier for you to narrow down searching for the image to just the files grouped alpha by ‘bg’
What’s your naming convention for images in your layouts?
Leave a Reply