Question

In several jquery tutorials, separate ID and Class are used for JS and CSS. for example

<div id="test" class="test">TEST</div>

As ID is used in the jQuery code, and Class is used in CSS. To me it is easier to not introduce Class and use ID for CSS rule too. Is there any advantage to use css-less ID for javascript?

EDIT: Thanks folks! I know the difference between ID and Class; I am asking why some use separate ID and Class for JS and CSS when one is sufficient. Here, the matter is the necessity for uniqueness of ID. The case is separating JS and CSS tasks (while they are closely entangled).

EDIT2: As requested, I give a typical example: this Tutorial. Look for actionsBox; .actionsBox has been used for CSS and #actionsBox for JS. As you can see there is only one <div> so ID would be enough for styling.

Answer 1

Edit: @Sharon commented a link to a great article that discusses the drawbacks of using id selectors in CSS.

One reason people might only use classes in CSS is the specificity of the id selector.

If you’ve got two style declarations for one element, and they specify different values for a property, then the style declaration with the more specific selector wins out.

For example:

HTML

<div id="test" class="special-test"></div>

 CSS

#test {
    color: red;
}

.special-test {
    color: blue;
}

The ID selector trumps all other selectors for specificity (see http://www.w3.org/TR/selectors/#specificity for the rules), so here, the <div> will be red.

People who added class="test" to the <div> would presumably have written this:

HTML

<div id="test" class="test special-test"></div>

 CSS

.test {
    color: red;
}

.special-test {
    color: blue;
}

When both style declarations have selectors with the same specificity, the later declaration wins out, so here the <div> would be blue.

Personally, I’ve never found that to be a problem. In the first example, all you have to write to make the <div> blue is this:

#test.special-test {
    color: blue;
}

But I guess some people find this aspect of specificity unnecessarily complex, and so avoid it by only using class selectors in their CSS.

(And I assume they keep the id because it’s faster to retrieve a DOM element in JavaScript by id than by class.)