Whats the best way to name id & 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.

Cheers.

Ps I am not new to CSS I am aware of giving them names that represent their structure etc. just want to know people opions 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 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 4

There is no real naming convention. Just agree on one with your team and keep it consistent. For instance don't mix camel case and snake case.

Try to be as description as possible when naming a class. Example:

.menu: bad
.head_menu: better

.wrapper: very bad
.main_content_wrapper: better

edit; Worse naming convention I saw is using the actual content of the styling. For instance:

.redButton

... because when I got to the code (legacy code), but "red button" was not red but blue (or something like that).

Try to use something that will not likely change, like the purpose of the class.

Answer 5

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 6

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 7

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.

Answer 8

Should this question get moved to: http://doctype.com/