div#name vs #name

Question

I know that in a stylesheet div#name and #name do the same thing. Personally I've taken to using div#name for most styling I do, with the reasoning that it's slightly faster, and means that I can identify HTML elements more easily by looking at the CSS.

However all of the big websites I seem to look at use #name over div#name (stack overflow included)

In fact I'm finding it very difficult to find many websites at all that use div#name over #name

Is there some advantage to doing #name that I'm missing? Are there any reasons to use it over div#name that I don't yet know about?

Answer 1

Since the div part of div#name is not required (because ID are unique per page), it makes for smaller CSS files to remove it. Smaller CSS files means faster HTTP requests and page load times.

And as NickC pointed out, lack of div allows one to change the HTML tag of the element without breaking the style rule.

Answer 2

Since ID's have to be unique on the page, most ID's you'd run into would only ever appear once in your style sheet, so it makes sense not to bother including what element it would appear on. Excluding it also saves a few characters in your style sheet, which for large sites which get visited millions and millions of times a day, saves quite a bit of bandwidth.

There is an advantage to including the element name in the case where a division with ID "name" might appear differently than a span with ID "name" (where it would show a division on one type of page and a span on another type of page). This is pretty rare though, and I've never personally run across a site that has done this. Usually they just use different ID's for them.

It's true that including the element name is faster, but the speed difference between including it and excluding it on an ID selector is very, very small. Much smaller than the bandwidth that the site is saving by excluding it.

Answer 3

a matter of code maintainability and readability.

when declaring element#foo the code-style becomes rigid - if one desires to change the document's structure, or replace element types, one would have to change the stylesheets as well.

if declaring #foo we'll better conform to the 'separation of concerns' and 'KISS' principals.

another important issue is the CSS files get minified by a couple of characters, that may build up to many of characters on large stylesheets.

Answer 4

Since an id like #name should be unique to the page, there is no reason per se to put the element with it. However, div#name will have a higher precedence, which may (or may not) be desired. See this fiddle where the following #name does not override the css of div#name.

Answer 5

I would guess that including the element name in your id selector would actually be slower – browsers typically hash elements with id attributes for quicker element look up. Adding in the element name would add an extra step that could potentially slow it down.

One reason you might want to use element name with id is if you need to create a stronger selector. For example you have a base stylesheet with:

#titlebar {
     background-color: #fafafa;
}

But, on a few pages, you include another stylesheet with some styles that are unique to those pages. If you wanted to override the style in the base stylesheet, you could beef up your selector:

div#titlebar {
    background-color: #ffff00;
}

This selector is more specific (has a higher specificity), so it will overwrite the base style.

Another reason you would want to use element name with id would be if different pages use a different element for the same id. Eg, using a span instead of a link when there is no appropriate link:

a#productId {
     color: #0000ff;
}
span#productId {
    color: #cccccc;
}