NICCAI

Use Classy Naming in Your CSS

When starting a new project, one of the first things you need to begin thinking about is how you are going to identify elements in your CSS.  More simply, how are you going to name your IDs and classes?  This sounds trivial, and in many cases, it can be.  But when you start working on larger, more complex projects with more and more people (think developers), it’s a good idea that you think about your naming and how the project will be maintained over time.  

At some point, you will likely inherit a project, pass one on, or work with one or more developers, and you’ll need to set some guidelines.  

Use classy names when setting ID and class names

What is a classy name?  It’s a name that means something.  It is a name that semantically describes the item being identified or a state being applied.  Too often, I’ll see a class name that describes the style declarations within. Examples:

.black { color: #000; }

.left { float: left; }

This type of naming is dirty and can create a maintenance nightmare down the road.  If the color changes, do you want to hunt through the source to change all occurrences of .black?  Absolutely not.  So, make it easier on you and easier on your team.  Try naming your classes with a bit of class.  Examples:

.selected or .highlight

The one thing you should be able to do when you look at a style is understand the style’s focus (the element in your UI to which it applies) or the style’s function (the state that it represents such as in a highlight or selected state).

Plan for reuse

Now that you’re using more semantic naming, try to consider how the style you are naming will be reused in other parts of your website or application. Will the naming break against a later item that needs styling?  If you think a particular selector can be used later on to identify a similar element (perhaps in a different instance or location), then your class naming should try to be flexible enough to accommodate this. 

Don’t pigeon hole your class names by making them too specific. Leave room for reuse in other parts of your project.

This type of declaration extension will reduce stylesheet bloat and make rapid adjustments more fluid.

Pick a naming convention and stick with it

It doesn’t really matter what it is, but stay consistent.  Personally, I prefer lowerCamelCase for my naming.  In lowerCamelCase, the words in a name are joined and the first letter of every subsequent word is uppercase.  Example:

#searchBox