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

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?

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.

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 PascalCasing because it aids readability.

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.

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.

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.

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.

After reading examples and making my own mistakes, I landed on this solution for myself:

1. Use hyphens to show hierarchy e.g. #products-MainContent {} or #maincontent-Summary {}. To me this means that MainContent is a child of the products div.
2. Capitalise each word after the first element in the heirarchy for IDs. Use all lowercase for classes e.g. #summary-Statistics (ID) or .summary-statistics (class)

This works for me for now. I don't want to use hyphens to separate words because I think hyphens should show dependency/relationships. Also I don't want to mix up IDs and Classes because they look similar so I changed the case in which they were written.

I recommend using the BEM (Block Element Modifier).

Retrieved from its website:

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

For more details please visit its website documentation:

http://getbem.com/naming/