Image File Naming Guidelines
March 20, 2012
Naming your image files clearly and consistently can make a developer's life a lot easier, so I wrote out a few of the guidelines I follow when naming my image files:
- Use dashes between words instead of underscores, mostly for SEO reasons, as dashes are read as spaces and underscores are not.
- All button image names start with "button-" this will group all your buttons together in an alphabetized list.
- Hover state image names end with "-hover" ending instead of starting with hover insures that the hover and normal states are still grouped together in an alphabetized list.
- Active state image names end with "-active" same grouping technique as with hover.
- All form image names start with "input-" same grouping technique as with buttons.
- All background images names end with "-bg"same grouping technique as with hover and active.
I'm sure there are a ton more conventions for naming image files and I invite you to email me your suggestions!