Naming your CSS styles

Posted on 10 July 2005 by Clive Walker in CSS

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

Stylesheets are more and more important for website styling and website layout. Gone are the days when only a couple of paragraph classes made up the .css file. It makes sense therefore to name CSS styles in a sensible way and to use a consistent naming convention.

It will help you when you come back to a website after a few months away from it – if the classes and IDs are named sensibly. Here are our tips…

Name your styles after their function – NOT their appearance. For example, we tend to use .p1, .p2 etc for paragraph styles rather than .pblue. After all, the style may change from blue.
Use these characters A-Za-z0-9 for your identifiers (classes, IDs etc). A hyphen (-) is allowed but identifier names should not start with a hyphen or a digit.
Avoid using underscore (_) because some (older) browsers do not support it.
We tend to stick with lower case and our style names are usually short.

In addition, if your style sheet starts to get long, we advise that you consider organising it so that common styles are grouped together. It’s just easier to find a particular style that way.

You may also want to consider using descendant selectors (see also descendant selectors here) and CSS shorthand but these are discussions for another day….