What's the best way to name IDs and classes in CSS and HTML?

Question

When naming classes and IDs for CSS what is the best method to use. In this case I need there to be some kind of naming convention so that other people can pick up rules and understand how to name their own ids and classes using the same pattern. Any suggestions? Some of the sites we create can get pretty complex but use an overall structure header, content and footer. The naming must be efficient too.

I am not new to CSS. I am aware of giving them names that represent their structure etc., but just want to know people opinions really and ways of doing this.

Answer 1

The best advice is to use class with semantics in mind

Good names don't change

Think about why you want something to look a certain way, and not really about how it should look. Looks can always change but the reasons for giving something a look stay the same.

Good names warning, important, downloadableImage and submenu are all good names. They describe what a certain element represents, and they are not likely to change. A warning will always remain a warning, no matter how much the look of the page changes.

Bad names border4px, lighttext and prettybackground are all examples of bad names. You might fatten that border to a whopping 5 pixels, or the background may look pretty old after a while, and not pretty at all. An advantage of using CSS is that you won't have to change much in order to change the looks of your website. If you have to change all light text into dark text, and thus change all classes lighttext to darktext in all your HTML pages, you're likely to miss a few.

from this article

Answer 2

IDs can only be used once per page, so they are useful for major structural elements like "header" and "footer" (until HTML5 comes in and replaces those with native elements).

Classes can be used multiple times, and you can use multiple classes per element. They should be kept fairly generic - so instead of, say, warningMessage you could create one style message with the basic layout style, and then warning, info, and error styles with different colours. Then use <div class="message warning">etc</div>

You should also use HTML elements where applicable. Instead of <span class="title">, use a heading tag like <h2>.

As others have said, you can use underscores or hyphens or camel case - i.e. my_style or my-style or myStyle. Just choose a convention and stick to it (personally I use my-style). Jitendra suggested in a comment that lowercase is better when you're using gzip compression, which is true all round - for font names, hex colours, and it's worth naming files (e.g. background images) in lowercase anyway.

Sometimes coming up with good names can be hard. Think about other places you might use the same formatting. For example, if you want to put the author and date of an article below the title in smaller grey text, you might use .authorAndDate, but a better way would be .byline. This is still quite descriptive, and can be used in other places too, say, image captions.