Best Practices for CSS, IDs, and Classes

Throughout my experience as a designer, I've come across a wide variation of coding styles and techniques.  While it would be nice if everyone worked against specific standards and conventions, the truth is, what works for some may not work for others.  As our experience grows, we develop new character traits in our code—almost a signature of sorts.  I'm not against having your own style of coding, but ultimately your code should be relatively easy for others to decipher and understand in the event a project is reassigned.

One of the biggest messes that a new coder on a project will have to sift through is the CSS.  Often times, the entire CSS for a site will be stashed in one central file.  This means hundreds of lines of code to sift through.  One way to make this task easier is to stick to a clear and logical method for organizing and naming your CSS.

Break Your CSS into Logical Chunks

When I'm writing out the CSS for a site, I tend to break up my code into logical blocks based on the section of the page.  At a high level, I'll usually include a "header", "main", and "footer" area.  Then I break up my styles into HTML element sections such as "forms", "tables", "headings" and "lists".  One thing to keep in mind is that CSS has an order of importance.  Styles that exist later in the code will override styles that appear above them.  The exception to this rule is when you use difference selector strings for the element you are styling.  There is a great article on this at Smashing Magazine.  You can also use the !important attribute for some browsers.

When to Use an ID or a Class

The art of choosing when to use an ID and when to use a class is simple.  For high level elements that will appear only once on a given page, use an ID.  If you want to create a style that applies to various elements on a page, use a class.  Keep in mind that you can assign multiple classes to any element.  You just need to separate the class name with a space in the class attribute.

<tag class="className1 className2 className3">

This allows you to create an assortment of styles that can be mixed and matched to achieve various results.

What Should I Name Them?

When you're naming your IDs and Classes, give them a name that you or someone else will understand later down the road.  You don't want to give styles names like "cherryRedSlurpy."  Make the names descriptive.  The ID for the left column should be something like "leftColumn."  The class name for an article entry should be "article" or "newsArticle" or something of the sort.

For forms, since every input, select, or textarea should have a unique ID, I like to prepend the formID to the beginning.  So for a login form, the password field would be "formLogin_password" so I can differentiate it from other fields in other forms.

You can also prepend a type of element to your IDs when they are in groups.  For navigation, I use IDs like "navHome", "navAbout", and "navContact".

Use Naming Conventions that are Cross-Language Compatible

Never use dashes in your naming.  Dashes don't work too well in Javascript.  If you need a separator, use an underscore.  Underscores are considered characters and are thus compatible with many languages.  I like to use a mixture of camelback case and underscores for my naming.

The naming style you ultimately end up using will evolve with your experience.  You'll get a better feel for what makes you more efficient and your code easier to read and decipher.  Consistency is the key with any coding project.  Don't ever get lazy as a coder, that will only lead to more problems down the road.