Separate ID and Class for JS and CSS

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

Read “Don't use class names to find HTML elements with JS” for some reasons why you may want to avoid using classnames in JavaScript.

This all boils down to personal preference, really.

Answer 2

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.)

Answer 3

You can use both ID and Class with both javascript and css. For example:

CSS

/*ID as identifier*/
#some_id {
    <css attributes>
}

/*Class as identifier*/
.some_class {
    <css attributes>
}

Javascript:

/*Get by ID*/
document.getElementById("some_id");
/*Get by class*/
document.getElementsByClassName("some_class");

The difference between the two is that ID will, or at least should be, unique and therefore will only affect or return a single element when applying css rules or selecting via javascript respectively. Class on the other hand is for affecting or selecting elements of a similar nature or classification.

If you had a car park with ten cars in it and you were to say "I want the car in space number three" you'd expect a single return whereas were you to say "I want the Fords from the car park" you'd expect to return every car in the car park which was a Ford. Css and javascipt use of ID and Class is no different.

EDIT: As per the OP's new redefined line of questioning.

css and IDs:

Css can harness IDs as an anchor so that the contents of a uniquely identified DOM object. Consider the folowing piece of css.

#some_id tr:nth-child(odd) {
    background-color:#666888;
}

In the above example the css is tied to a unique identifier which in this case the ID is assigned to a table but the css rules themselves are applied to the odd rows within the table. In other words the css in this case affects table row elements where TR itself is an object class (not to be confused with css class).

In short, for ID at least, it is useful to use IDs within css and when you consider that jQuery and the likes of support Class-based queries using Class for selection within javascript is also useful.

Answer 4

Curious about the dual nature of "ID" in javascript and CSS. If you visit this example from w3schools: http://www.w3schools.com/js/tryit.asp?filename=tryjs_blocks you'll see the which is "naming" this particular <div> with the name "myDiv". This is because javascript getElementById("myDiv") is used later to modify the text contents of this specific <div>

BUT - if you add the line of code: <style> #myDiv { color:blue; } </style>

you now have a CSS id with the same name as the javascript <div id>

The sample code in the w3schools does indeed change the color of the <div> called "myDiv" to blue. But when you push the "try it" button on that page, the CONTENTS of the javascript <div> also changes, which is the point of the w3schools example. Ie., it's teaching you that getElementById("myDiv") is how you can retrieve and modify contents of a named <div>

But because the identically named CSS #myDiv id is in force the <div> contents are changed, and they remain blue due to the style sheet.
So when you see a <div id="myDiv"> inside an HTML page, how can you readily tell if this <div> wants CSS id treatment? Or if this <div> will be referenced by some javascript getElementById() method?

Answer 5

Maybe you should check out the differenc between ID's and Classes:

• http://css-tricks.com/the-difference-between-id-and-class/

I have never heard of using classes only in CSS and ID's only for JavaScript.

The main thing is ID's are unique, thats why they are called identifiers. If you have the same styling of a div over and over again on your webpage you should use a class to style them.

EDIT: It's not common or maybe its not allowed, I'm not sure, that ID's start with a number !

Answer 6

Id should(read: must) be unique. A class is a set of object that have similarities, for example all lists on the page should look the same (but then you should use the list selector instead of a seperate class for it.

They have different purposes.

Answer 7

You can use id and / or class in JS and / or CSS. It all depends what you want to select. If you want to select a single DOM element, feel free to use id. If you want to select a group of related elements you might be better off using class.