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

.clas

Answer 1

You preference should be, in order from highest to lowest:

1. id

2. tag
3. tag.className
4. .className

ID selectors are fast. Tag selectors are reasonably fast. Pure class selectors are slow because the browser essentially has to interrogate every element and see if each has that class. Getting elements by ID or tag name are "native" operations from a browser's context.

Also, I find it good practice to make your CSS selectors as restrictive as possible otherwise it just turns into a mess and you end up getting all sorts of unintended consequences where CSS rules apply where you didn't otherwise expect, which often forces you to create a similar yet different selector just so none of the rules regarding the first don't apply (translating into more mess).

Basically if you know if you only use a class on div elements then do this

div.className

not

.className

If you apply a class to several elements just list them:

h1.selected, h2.selected, h3.selected

instead of

.selected

In practice I find very few situations where you need to use "naked" class selectors or where it is advisable to do so.

Answer 2

As to your two first selectors, the first of the two will overwrite the second, as it's more specific. You can calculate the specificity of a selector.

Answer 3

you should use the selector best describing your rules

• id: when you want to select one single element

• .classname: when you want to style elements regardless of their tag
• tag.classname: when you want to style only tags with the given class
• tag tag tag: when you want to style all subelements of a tag

Answer 4

It really depends on the situation:

.error{
  color:red;
}

p.error{
  background-color:yellow;
}

div.error{
  background-color:grey;
}

Always use the cascading effect of CSS to your advantage.

Answer 5

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.

Answer 6

I know this is a pretty old question but for all those who are reading this just now... There are 4 categories of rules in general: ID Rules, Class Rules, Tag Rules, Universal Rules. And it's important to mention that class selectors are faster than tag selectors. So you should always use them in the following order
1. ID Selector
2. Class Selector
3. Tag Selector
4. Universal Selectors

In your case you should never use the tag name before class name.

You can find more information here: Writing efficient CSS