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

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

• header

• footer

• container

• .post
• .title

Those are the ones which come up in most of my projects but obviously it depends what you're doing. Just try to keep it logical.

Answer 2

be descriptive and name your ids and classes in a semantic way, give them meaning

Answer 3

The rules for naming an id or class attribute are simple. Keep it short, keep it consistent (i.e. if you use hyphens, underscores, or CamelCase for one, use the same format for the others), and make sure the name is based on the function or meaning of the element, NOT the style to be applied.

e.g.

<span class="warningMessage">, <span class="warning-message">, <span class="warning-message"> are all perfectly acceptable.

<span class="red-text"> would not be ... what happens when you change the colour to blue?

Answer 4

I like to give them one word, then one number then one letter. For example, Header1A, Header2A

The number describes one section. If I had another header in an other section I would call it, Header1B, Header2B

or you can try a different approach. Use a camelcase names for header you can name it header, simple as that. But for content inside a header use a camelcase. For example, headerMessage. Or headerLogo

Just to give you ideas

Answer 5

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.

Answer 6

I name my ids and classes for their purpose. I try not to use descriptions that use color or direction.

For example, if I have a sidebar that is on the left, but it's for the main menu, I may name it #main or #mainMenu. The right sidebar in the same site would be #altSidebar or #subMenu.

I have many more classes than id's so naming them is a little harder.