What is the best practice for naming and casing multi-word CSS classes and ids?

Question

I'm trying to find out what is the best practice for naming and casing css classes and ids, especially multiple word names.

So for instance, say I have a <div> that I want to name "character skills". It seems like there are 3 choices: "characterskills", "character_skills", or "character-skills".

Which one of these is the industry standard for naming css classes and ids?

What's the best practice for splitting multiple words in css names?

Also is it a best practice to always use all lowercase for css names, because they are case-insensitive?

Answer 1

I personally use the hyphenated style (i.e. some-class) but you should simply choose what you feel is best and be consistent. It is purely an issue of aesthetics.

Answer 2

I see the following casing styles a lot:

characterSkills, CharacterSkills

But, at the end of the day it doesn't matter which style you pick. Just be consistent within your own app.

Answer 3

I've seen several different answers to this question, depending on who you ask. Ranging through all of the possibilities you mentioned and probably more. The one I see referenced most often, however is to use underscores (character_skills) and all lowercase.

The one answer thats always mentioned though and arguably more important than which method you choose, is to pick one and stick to it throughout. Keeping things uniform throughout allows you to avoid confusion and other problems later.

Answer 4

I tend to use the hyphenated style as well. I mainly use that style since CSS properties follow the same casing. Similarly, JavaScript functions and variables tend to use lower camel case. For example, to change a CSS property in JavaScript, you would type object.style.textDecoration, but in CSS, that property would be changed with text-decoration.

Answer 5

I use lowerCamelCase for classes, and UpperCamel for IDs, like so:

#HeaderLogo { ... }
.pullQuote { ... }

But it really makes absolutely no difference so long as you're consistent :) Oh, and try to stick to one-word class names where possible - you can always combine classes, like so:

.boxout { border: 1px solid; padding: 10px; }
.emphasised { font-weight: bold; }
.subtle { font-size: small; }

.boxout.emphasised { background: yellow; }
.boxout.subtle { color: gray; }

...which I prefer, as you can have your "base" classes hold core definitions, keeping your CSS smaller, and reducing the overall number of classes you have to remember when designing pages.

Answer 6

I use lowerCamel for class names and UpperCamel for IDs. This is quite important and I'm beating this old answer because IMO the hyphenated style should be discouraged, even underscore is better than hyphenated.

Why? Because every other language can't have hyphenated variable names. For e.g., your IDE may or may not pick up auto-completion properly. (My IDE can't, it's VI :P)

CSS being closely related to JavaScript, hyphenated classname also make it difficult to interop with JavaScript. Consider the following (contrived) jQuery:

// For each of the following class, perform a function
var funcs = 
{
    main: function(){ /* ... */},
    toolbar: function(){ /* ... */ },

    // Oops, need to use a quote because there's this hyphenated name
    'customer-info': function(){ /* ... */ }
};

// Woot, a O(n^2) function
for(var className in funcs)
{
    var func = funcs[className];
    // maybe if we named it $('#some-selector')? The hyphen suddenly feels 
    // like some kind of operator to me. Makes me nervous :/
    $('#SomeSelector div').each(function()
    {
        if($(this).hasClass(className)) func();
    });
}

There's no clear advantage to using the hyphenated style other than subjective aesthetics. The disadvantages are that it stands out from every other programming language (OK, CSS may not be a programming language, oh well..) and that it is technically incorrect.

The correct (huh?) way to represent a space is underscore. Consider this phrase "a self-addressed letter," how can I convert the spaces?

• a_self-addressed_letter (correct, preserves the original meaning)
• a-self-addressed-letter (ouch! if we convert it back we get "a self addressed letter"!)

Also is it a best practice to always use all lowercase for css names, because they are case-insensitive?

I guess in this case, it's a best practice to always use CamelCasing because it aids readability.