Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Team Think Labs | Thoughtful Naming of Things
single,single-post,postid-3247,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Thoughtful Naming of Things

Making up names for things is a common task for designers and developers that oftentimes happens without much thought. Developers are constantly naming HTML elements, symbols in Flash, variable names, asset file names, etc… Designers name things like layers and layer groups in their design files.

When things get hectic and you have to move fast, naming conventions come to mind as something that can be sort of neglected a little bit without damaging the product. The end user and the client will probably never come across these so what’s the harm in slacking here? Something’s got to give, right? On the contrary, practicing useful naming conventions can save a lot of time and headache, which is always good for us and the quality of our work.

I’m going to use CSS and HTML as examples but this thought processes can be applied to almost anything you name. Obviously there’s no right or wrong way to name any specific part of a design or application, but there certainly are better and worse ways. Take this example of something that might be named unhelpfully:

<h2 class="orange_header">Contact Veridian Dynamics</h2>






Ok, “orange_header” is a simple choice and seems like a perfect name for this element. It’s descriptive without question. But what if design changes make that header blue instead of orange? The name is no longer valid and you’ll be changing the the class name in CSS, HTML, and possibly some JavaScript.

Let’s use the same example to illustrate another, similar naming pitfall. This time though, the header is not a web font and you’ve decided to use an image to display the type. I’ve actually seen files named something like “contact_veridian_dynamics_header.png”. Really, I have. If the copy ever changes you’d have to change the name of that image file to retain consistency and likely the class name as well.

If things like this happened to an entire site you’ve built with this type of naming system, you’d be in trouble. You would either have to go through your code and file library making the changes necessary (no fun) or accept and make note of the discrepancy. The latter can cause problems, especially if you’re working on a team who knows about colors and words. We would all have a hard time identifying this “orange_header” element in a design with no orange headers, wouldn’t we?

Instead of naming things based on the way they look, we should strive to give them meaningful names that describe how they function. Something like “page_header” would be better.


Don’t name CSS classes or IDs based on the properties they have. Like this:





I’ve seen this kind of class being used all throughout HTML. At this point it would be less work to use inline styles, which is a red flag in itself.

In Conclusion:

Only you know, in your heart, if you’re guilty of the some of the crimes I demonstrated above. It’ll be ok, don’t fret but don’t delay! Start working on naming conventions forthwith. It may seem like a hassle at first but in time, it will become how your brain operates and it’s so worth it!