Use HTML tag names, classes or IDs in CSS?

Question

In designing the HTML and CSS for a page, when should I use

img.className

versus

.className

versus

#idName

or some other variant?

Are there guidelines or recommendations?

Summary from answers

Thank you to all answerers - there is some excellent stuff here!

• make CSS as specific as possible
• use an OO approach
• order: #id, tag, tag.className, .className
• when to use each selector, also class/ID comparison
• give selectors names based on purpose, not what they look like
• use advanced selectors for smaller code, leave CSS classes for exceptions/overrides only
• manage ASP.NET munging ID

Answer 1

It depends on the intended semantics, and, as others said, be as specific as possible.

• #idName for unique elements on the page. Good examples are #header and #footer
• TAGNAME for general purpose page styling.
• TAG.classname and .classname for exceptions/overrides to the above rules.

And don't forget the use of advanced selectors. A bad example:

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    .in_the_menu { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1 class="in_the_menu">My Menu</h1>
</div>

The same could have been achieved with:

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    #mainMenu H1 { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1>My Menu</h1>
</div>

The second example gets rid of the superflous "class" attribute on the H1 element in the "mainMenu" div. This has two important benefits:

1. The HTML code is smaller and cleaner
2. You are less likely to forget to add the class attribute

If you take good care of you CSS, and make use of proper advanced selectors, you can nearly completely leave out CSS classes. And keep them only for exceptions/overrides.

Take this example which draws boxes with headers:

#content H2{
   border: 1px solid #008789;
   padding: 0em 1em;
   margin: 0.2em 0em;
   margin-bottom: 1em;
   font-size: 100%;
   background: #cccb79
}

#content H2 + DIV{
   margin-top: -1em;
   border-left: 1px solid #008789;
   border-right: 1px solid #008789;
   border-bottom: 1px solid #008789;
   margin-bottom: 1em;
}

Now, as soon as you follow a H2 with a DIV in the #content element, you have a nice box. other DIVs and H2s are left alone:

<div id="content">

    <h2>Hello Box!</h2>
    <div>Some text</div>

    <div>Some more text</div>

    <div>Some more text</div>

    <h2>And another title</h2>

</div>

If you get these rules right, you hardly ever need classes, and can work with IDs and TAG names alone. And as an added bonus, your HTML will be a lot nicer to read and maintain.