If you’re anything like me, you’re probably not the most imaginative when it comes to naming conventions for elements of your web pages. At some point in time, it pays to pay attention to those details, as it will spare you a lot of grief in the long run.

For example, I recently created an application form called “short_form” because it was an intermediary form with only 4 inputs that fed into a large 40+ input form. I named the rollover submit button, imaginatively, “application_submit_rollover”. These things, in and of themselves, are not a problem. It’s when you start duplicating things that you will start running into issues.

Now take short_form and duplicate it. It is on a separate, but related web page that uses its own CSS and its own image directory. Me, being lazy, decides that instead of renaming everything, I would simply restyle the same elements and replace the images with different images, but retain all of the same naming conventions.

Man, I felt productive on that day.

Then came the decision to pull that separate page into the original site. Uh oh. Now we have a problem.

Now I have two different forms with completely different styles and images, but the same #ids. Not only that, but to my chagrin, I discovered that another designer had created yet a THIRD application using similar naming conventions. But of course, instead of “application_submit_rollover.PNG” he named his image “application_submit_rollover.GIF”, further complicating the issue.

Long story short, we had to spend more time fixing our naming issues than it would have taken us to create the forms from scratch with appropriately, and UNIQUELY, named elements.

So take it as a lesson learned: Shortcuts taken to increase productivity can in the end come back to haunt you. Take the time to do things correctly, and you can better spend your time worrying about the issues that really matter.