Forming Effective CSS Classes & IDs

If you’ve ever had trouble establishing a naming standard for your CSS classes, or if you work closely with a developer who demands uniformity when assigning IDs elements, here are some conventions (as well as some of my personal preferences on usage) that should help you form effective, easy-to-remember and predictable names.

CamelCase

Popular among most programming languages, CamelCase is the practice of writing a multi-word name or phrase without spaces, and then capitalizing each word to make up for the lack of those spaces. The capital letters resemble the “humps” of a camel, hence the name. For example:

div#MainContentBody { … }

Personally, I prefer to use this on IDs only; using a different naming convention for classes provides me with an added visual cue to differentiate it from IDs.

Several alternate names exist for this practice; NerdCaps would have to be my favorite. :)

Hungarian Notation

In line with using CamelCase, Hungarian Notation could also be used to make IDs more meaningful. In the case of Web development, we simply prefix the type of element to which the ID is assigned. Using our previous example:

#divMainContentBody { … }

Notice how we can conveniently omit typing in the element name from the selector. This also minimizes the need to switch between your stylesheet and your markup, since the ID already tells you what element type it is referring to.

Dash-Spacing

The more common naming convention I’ve seen on stylesheets is dash-spacing. Basically, it’s replacing the spaces in a multi-word name or phrase with dashes. For example:

div.content-block { … }

Beyond being an alternative to spaces, dashes can have more interesting uses, as described in the following sections.

HTML Ancestry

Dashes imply forward direction, and may be used to define an element’s ancestry. Think of the dash as a delimiter between a parent and child element:

div.content { … }
    div.content-block { … }
        h2.content-block-header { … }
            small.content-block-header-meta { … }
        p.content-block-body { … }

This helps you to visualize the structure of your markup without having to view the HTML code itself.

Element Variation

Dash-spacing can also be used to identify variations of that element, while avoiding overriding similar generic class names. Define a “base class” to hold all the similar rules, and then add variations to specify the style differences:

/* stylesheet */
div.content-block { … }  /* base class */
div.content-block-article { … }  /* variant 1 */
div.content-block-list { … }  /* variant 2 */
div.content-block-photo { … }  /* variant 3 */

<!-- HTML -->
<div class="block block-article"> … </div>

Namespaces

The use of namespaces allows you to limit your rules within a particular context, much like how your surname differentiates you from all the other people with the same first name as you. This allows you to create class names that are both standard and unique across markups of similar structure (such as content blocks with header and body portions), as illustrated:

div.maincontent-block { … }
div.maincontent-block-header { … }
div.maincontent-block-body { … }
…
div.subcontent-block { … }
div.subcontent-block-header { … }
div.subcontent-block-body { … }

Namespaces are especially useful for scripts and snippets that are designed to be included in other sites. Ma.gnolia does this with their Link Roll snippet:

div.magnolia-linkroll { … }
div.magnolia-linkroll-title { … }
div.magnolia-byline { … }
/* And so on… */

Feel free to adapt these widely-used conventions, or come up with your own, if you wish. (You can even post them in the comments area for reference.) What’s important is that you maintain consistency and organization in your coding; you’ll thank yourself for it later.

You might also like:

1. CSS Code Visual Grouping Techniques
2. Maximize CSS Comment Usage
3. CSS First-Aid for IE Peekaboo Bug