1

I think I understand how IDs and classes are used (IDs for a single element on an HTML page, classes for many elements). But why bother with IDs in the first place; why not just use classes for everything?

JamesGold
  • 795
  • 2
  • 8
  • 24
  • For 1 example, id's has an higher priority in css than classes. – Carl0s1z May 21 '14 at 07:56
  • http://css-tricks.com/the-difference-between-id-and-class/ – Antony May 21 '14 at 07:56
  • if you will provide style to id then it will be use for 1 element but classes can be use more then one – unknownbits May 21 '14 at 07:57
  • IDs being unique, are an identifier of a specific element instance. Their importance is that you can target this element safely knowing that you're getting that specific element, assuming your code is valid. Classes are not for a specific unique instance in mind, and are for applying properties to a group of elements, or for targetting multiple elements, and are also stackable by the ability of assigning multiple classes to element(s). – flauntster May 21 '14 at 08:06

3 Answers3

5

  • It's much easier to target a particular element using script while using id.

  • ID's have heigh CSS specificity. If you have some elements having the same class and you need to apply particular styles to one of those elements, you can use an Id. Since id has more specificity, the css applied by class will be overridden…

For eg, consider the following scenario

HTML

<div class='box'></div>
<div class=' red box'></div>
<div id='red' class='box'></div>
<div class='box'></div>
<div class='box'></div>

CSS 

.red{
 background:red;
}
#red{
 background:red;
}
.box{
 width:50px;
 height:50px;
 background:dodgerblue;
 margin:5px;
}

Here, only the element with id red will have red background as seen in this JSFiddle. The css applied by class red will be overridden by css in box class since they have same specificity and .box appears later.

Side note: You can also override css using !important keyword but IMHO it's a bad practice. Assume you'v applied css properties having !important keyword for an element, and your colleague is trying to modify the same properties using something like javascript/JQuery - he'll be puzzled why those styles are not being applied - Even if script is injecting inline styles, it won't override the !important rules. But if you use a more specific selector, like an ID in our case, inline styles will take precedence as expected, which will avoid confusion and might save a bit of time

T J
  • 42,762
  • 13
  • 83
  • 138
1

Because ID's are more important than classes. If you make something like this:

.hello {
    color: green;
}

#goodbye .hello{
    color: red;
}

Every class hello will have color green, but when they are inside a div with id goodbye they all will be red.

So it is pretty important to use id's sometimes, because they are much stronger than classes.

Sten Pelzer
  • 497
  • 2
  • 19
0

At least two reasons:

  • It adds to improving your DOM structure.
  • Elements with IDs are easier to target with JavaScript.
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Sander
  • 1,244
  • 1
  • 12
  • 24