HTML & CSS
As my website becomes larger and more complex, I am starting to amass quite a number of Images, Thumbnails, Buttons, Icons, etc.
And the thought occurred to me this weekend that I better come up with a better naming convention before things get totally out-of-control?! :eek:
What "Naming Convention" do you use for your Images/Icons/etc?
And, in the examples below, which of the following do you think is best, and why?
Fill in the blank: ___________
Some people would say that you should keep your file names short-and-sweet, but I think there is a benefit to making them verbose.
First, like everything on my computer, I tend to name things in such a way that things file themselves. (So, for instance, having "star" as the leading characters would help all of my Stars to group together.)
Also, I personally like to keep the Image/Icon Dimensions handy because it helps when laying out pages and doing the CSS.
On the other hand, you could argue that if I have to tweak an Icon, say from 20px by 20 px to 16px by 16px that I have just created A LOT of work for myself, because I have to chase down those old file name and update my HTML and PHP... (:
I can see both arguments...
And this is probably why I am asking for advice from you guys...
Yep it's a good idea to use naming conventions so you can easily locate specific image types
For general assets I use something like this:
- bg is a background image
- body is where it's applied
- snow is the subject of the image
- icon is an icon type
- phone is the icon subject
- 16 is the icon size
Then for general images I may use a format such as type-subject-detail-date.png, eg:
I also tend to prefer underscores between words rather than hyphens because then I can double-click on the name to copy and paste and the entire name will be selected instead of just part of it. It's a lot faster than highlighting the entire name with my mouse. I find it really saves me a lot of time.
I tend to use the
star-red-15x15.png naming convention or close to it and like bluedreamer's examples. I intentionally minimize using underscores in filenames because one cannot always tell if one is missing. Debugging a careless mistake is more time consuming (annoying) than highlighting a filename with hyphens to me. (I make errors. :eek:)
I usually replace spaces with dashes, and use prefix and suffixes like
If there are a terrible lot of images, instead of throwing all images in 1 big directory, you can also differentiate by directory; for instance:
images/pages/... (all rather unique images in articles & other pages)
system/images... (all other system-images)
pages/images/... (all rather unique images in articles & other pages)
Just how deep you want to go in the specification, and what fits the best in the rest of the system.
I like your suggestions!! :tup:
Unfortunately, though, a lot of this will have to come out in the wash because I have never built a website before, so I don't have any baseline to go off of when it comes to organizing things.
I hate to say, "Things will work themselves out" because that invites disaster.
At the same time, I could spend the next year planning only to find out that my "plans" don't reflect the "reality" of my website?! :eek:
Let's hope that all of the detailed planning that I have been doing on my website over the past 3 years is enough!!
This topic is now closed. New replies are no longer allowed.