CODEWITHSUNDEEP
cssnaming-conventions
Mark Rogers
Mark Rogers

Reputation: 97687

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?

Upvotes: 16

Views: 9969

Answers (8)

Saeed Hassanvand
Saeed Hassanvand

Reputation: 977

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/

Upvotes: 0

jennyfofenny
jennyfofenny

Reputation: 4365

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.

Upvotes: 20

volume one
volume one

Reputation: 7553

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.

Upvotes: 0

kizzx2
kizzx2

Reputation: 19213

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.

Upvotes: 5

Keith Williams
Keith Williams

Reputation: 2357

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.

Upvotes: 0

Mercurybullet
Mercurybullet

Reputation: 889

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.

Upvotes: 0

ChrisLively
ChrisLively

Reputation: 88044

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.

Upvotes: 2

Andrew Hare
Andrew Hare

Reputation: 351476

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.

Upvotes: 3

Related Questions