CODEWITHSUNDEEP
htmlcsscss-selectors
Pennf0lio
Pennf0lio

Reputation: 3896

Is using classes to a single element over an ID just a preference or there would be a complication to it?

In CSS I understand that you use ID if you're targeting a unique element and use classes for general targeting of a group of element. I am maintaining a site where i have to clean up some of the code (html + css), I notice that the previous programmer didn't use any ID for all the element instead he used classes even for unique elements.

So, what's should be an advisable approach, Should I just use classes and follow his coding style, avoid using ID for the elements or should I replace them with IDs and use ID for appropriate elements.

In css, in my understanding, classes can also be used like an ID where you can just target a single element (eg. .footer vs #footer) and is just a matter of preference. 

#header { background: #ccc; height: 150px; }
#content { background: red; height: 200px; color: #fff;  }


<div id="header"><h1>Header Area</h1></div>
<div id="content"><h1>Content</h1></div>
<div id="header"><h1>Footer Area</h1></div>

notice #header was mentioned twice in the id and css rule applies to the two elements.

IDs behaves like Classes (http://jsfiddle.net/79GsY/)

.header { background: #ccc; height: 150px; }
.content { background: red; height: 200px; color: #fff;  }
.footer { background: brown; height: 150px; }


<div class="header"><h1>Header Area</h1></div>
<div class="content"><h1>Content</h1></div>
<div class="footer"><h1>Footer Area</h1></div>

Notice that there was no ID used here.

Classes behaves like ID (http://jsfiddle.net/qHEJd/)

Please enlighten me with this matter. Thank You.

Upvotes: 2

Views: 801

Answers (7)

T.J. Crowder
T.J. Crowder

Reputation: 1074138

The odds of it making any real difference to the site are near zero, so it's up to you. It's a style preference.

I think your question is mainly about the application of CSS styles to the elements, as opposed to scripting. When the CSS is being applied to the elements for styling purposes, I believe it makes literally no difference (other than specificity stuff) whether you use class selectors or ID selectors to specify the styles for the elements. Style application is done by taking the element and matching it against rules, not taking rules and finding elements that match them, if you see what I mean.

On the scripting front, though, for completeness: If you're looking up these elements with jQuery using CSS selectors, an ID selector may be very marginally faster than a class selector to find a single element in a very large document. That's because $("#someId") ends up being a call to document.getElementById which the browser can do efficiently because it knows that there will only be a single match. In contrast, $(".someClass") ends up being a call to querySelectorAll, which has to keep searching through the entire document (barring that search having already been cached by the selector engine, of course) even after finding one element, in case there are others.

But again: The odds of it making any real-world difference are virtually nil.

And a very minor point: Every element with an id creates a property on the window object with that id as its name (e.g., <div id="foo"> creates a foo property on window). Creating a lot of properties you're not going to use is a teensy tiny ipsy little bit of unnecessary work. ;-) But to call that premature optimization is to dramatically underestimate how premature it is (and dramatically overestimate the amount it optimizes). E.g., this is just trivia. :-)

Upvotes: 0

powerbuoy
powerbuoy

Reputation: 12838

An ID must be unique, a class can be used several times.

Personally I use IDs to name different sections of a site. IDs always describe what something is, never what it looks like. Examples of common IDs for me are #header, #footer, #post-comment etc.

Classes, on the other hand, are used to categorise similar elements. Both CSS and JS can then target a specific class. Examples of classes are .button, .icon etc.

Personally I don't use classes much at all but prefer to use SASS @mixins as they keep the HTML clean from design related class names.

Upvotes: 4

Prashant Kankhara
Prashant Kankhara

Reputation: 1588

I would prefer to use ID for the Unique element and Classes for the group of element. Because,

When you are using IDs for the unique element DOM will search Tag with tha ID and will stop its searching as soon as it finds that Tag. On the other end if you choose class for the unique element it would work same as IDS but DOM will not stop its searching even after it finds that Tag. It will search the whole page to find any other Tag with that class.

For the Group of Elements, we can't use IDS hence the using Class is the obvious Choice.

Hope this clear your doubt. Let me know if i am missing something.

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46549

It's a matter of semantics. You use IDs to identify an element, for instance to distinguish multiple forms on a page, or as link targets. They have a meaning to the markup.

With classes, you set a classification for things, you don't really give them a meaning. It's not like you're grouping them together or anything.

So it's perfectly fine if only one element on a page has a certain class. That doesn't make it "unique".

Upvotes: 5

Adil Shaikh
Adil Shaikh

Reputation: 44740

You should always keep in mind that ID's Should be unique , if you have unique element, you better use ID, if not use class

quoting from w3c page -

What makes attributes of type ID special is that no two such attributes can have the same value in a document

Upvotes: 0

johnkavanagh
johnkavanagh

Reputation: 4674

In this instance, there's very little difference between using class names or ID. There is argument that using an ID in CSS will allow for minutely-faster processing, but it's such a tiny difference to be negligible.

There isn't any reason why you should spend the time modifying the previous developer's markup as long as it is valid (ie: no repetition of IDs) and works. Modifying classes or IDs/etc may well cause non-desired effects (particularly if the JavaScript is tied to those same DOM elements).

Upvotes: 1

Chris Dixon
Chris Dixon

Reputation: 9167

The only difference when it matters if you use class or id is if you multiple instances of that element. Say, you had a header/content and footer, you know you're going to have only singleton instances of these and so I'd use an id.

However, if you have two headers, so:

<div id="header></div>
<div id="header></div>

This does not comply with HTML standards, and so I'd use:

<div class="header></div>
<div class="header></div>

In base, if it's a single instance of that element, use an id. If you know you're doing the same operation more than once on an element, use a class. This is also the standard rule for CSS, to a degree.

Upvotes: 0

Related Questions