问题
I'm new to HTML / CSS coding and since I first bumped into the ID and class selector, one question has been running through my mind. I searched the web thoroughly over and over again, but I coudln't find the answer I was looking for.
The question is : Why use ID when you can do the same task with class ?
I mean, ok I know that ID's are just for one time use and classes are for many, but what forbids me from using the class selector for just once ? So, according to this, what is the purpose of existence of ID's in CSS ?
Furthermore, what do we need ID's and even classes for, when we can make a new element in the stylesheet with exactly the same attributes ?
The following code is an example of what I'm trying to ask :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ID's, classes and new elements</title>
<style>
#sidebar1 {
display: block;
background-color: yellow;
width: 200px;
height: 500px;
margin-right: 50px;
float: left;
}
.sidebar2 {
display: block;
background-color: yellow;
width: 200px;
height: 500px;
margin-right: 50px;
float: left;
}
new_element {
display: block;
background-color: yellow;
width: 200px;
height: 500px;
margin-right: 50px;
float: left;
}
</style>
</head>
<body>
<div id="sidebar1">What is the difference?</div><!--Use of ID selector-->
<div class="sidebar2">What is the difference?</div><!--Use of class selector just once !-->
<new_element>What is the difference?</new_element><!--Use of a new made element with exactly the same attributes-->
</body>
</html>
回答1:
There are several differences between ids and classes. Probably most importantly there is a semantic difference. An Id needs to be unique (actually you html is invalid if you use the same id twice in the document) and identifies special elements in your HTML Document, classes are there to group elements which have something in common.
1) Searching for id in the HTML Tree is faster than class because the css processor stops at the first matching element it finds. (Thus id css selectors are faster).
2) Ids and classes have different specificity. Since ids are unique in the document, they have higher specificity than classes. This is important in bigger projects where you have a lot of CSS rules where a lot of overwriting occurs.
3) The difference between classes and ids is even greater once you work with javascript.
Defining new elements leads you markup to be invalid, that's why the last option is not a good idea.
回答2:
Both will have the same outcome, but while a class can be used once or multiple times, an ID can only be used once. If you have a unique element that will not be reused on the page, an ID should be used. If it is something that will be recurring, a class should be used.
Some of the differences don't involve just CSS. Later, if you delve into javascript, you may be selecting HTML elements. If you want to ensure you will be selecting the correct element, an ID would be more helpful than a class.
回答3:
I believe there are a few reasons.
One is because of specificity, id rank higher than classes.
Another is based on the particular use of the object you are effecting. Is the class something that only effects the font-size, weight, family and does it need to be used multiple times or only once?
I think that semantics plays a part as well, i.e. if you only use a class once, it more be more semantic to use an id instead.
You also use an id for JavaScript to grab an element from the document.
Those are only a few, but I hope this helps
回答4:
It is best to avoid using custom tags, as you never know when those tags may become standardized, and have special usage in the future. Also your html markup will be invalid.
I think here is nice explanation about difference between id and class.
回答5:
What you have bumped into is the CSS concept of specificity. Classes, IDs and element selectors are only 3 of over 30 selectors, which means that there must be rules to govern the priorities.
Calculating specificity is quite complicated, but in most cases it looks more or less like this (higher priority selectors are first):
- In-tag style definitions
- IDs
- Classes
- Elements
- Everything (*)
When it comes to the specifics of ID or Class, I treat it as a matter of style and semantics: an ID should be used with something that is unique, while a Class is intended to be reusable.
回答6:
There is nothing which forbids you to use classes for single elements. Imho its not a bad practise at all.
Its all about the expressive value of the selector you're using. Both in the html and the css you're writing. If someone else or your future self sees an ID (and you're other code looks like, you know what you're doing ;)) in one of the two, he knows or at least should immediately know that a certain element is existing just once on a page.
The drawback is, that overwriting rules gets more difficult as ID's have more weight / a higher specificity than classes. Depending on the strategy of class-naming and the rules you set here this might or might not be an issue.
There a lot of good reads out there about this subject. As a start I would recommend you, to have a look here: https://github.com/stevekwan/best-practices/blob/master/css/best-practices.md
来源：https://stackoverflow.com/questions/19914617/css-ids-and-classes