I have been a back-end engineer for the past several years but I do dabble at front end stuff including CSS and Javascript. Today I am messing with my blog trying to style it better and this question hit me.
To answer this question I need to understand the differences between a class and an ID. So I began searching on Google trying to find different perspectives on this issue. My original thought is this: I want to use class because an element can have one or more classes; whereas an element can only have one ID.
Here are some of the arguments and respective rebuttals I've put together:
Point #1
Argument: ID is unique and is for unique elements of your page. This makes it easy to understand the semantics of your page.
Rebuttal: Let's clarify this argument. ID is unique in the DOM and you should use ID to style any unique section in your page, such as the top navigation, the menu bar, the top heading, the footer, etc. If what you want to style applies to multiple sections (e.g. you want to style <h1> the same way as <p>) then you use class. Then just by looking at the style sheet you'll be able to kind of know the structure of the document (e.g. .post is a class and therefore the document may contain multiple sections that are considered "posts"; #header is an ID and therefore the document has only one header).
This sounds like a logical point but after giving it more thought I cannot find any support for it![]()
Indeed ID is unique in the document, but how many site owners follow this rule? If only a few follow it you wouldn't be able to understand the semantics of the majority of the sites just by looking at the usage of class vs id in the style sheet anyway.
Rebuttal: Let's clarify this argument. ID is unique in the DOM and you should use ID to style any unique section in your page, such as the top navigation, the menu bar, the top heading, the footer, etc. If what you want to style applies to multiple sections (e.g. you want to style <h1> the same way as <p>) then you use class. Then just by looking at the style sheet you'll be able to kind of know the structure of the document (e.g. .post is a class and therefore the document may contain multiple sections that are considered "posts"; #header is an ID and therefore the document has only one header).
This sounds like a logical point but after giving it more thought I cannot find any support for it
Point #2
Argument: An ID has higher specificity than a class.
Rebuttal: Yes, if there are multiple CSS declarations that match a particular tag, the CSS declaration that includes an ID probably has higher specificity and will override the other declarations. For example say you have <div id="id1" class="class1"> this is a paragraph</div> and in your style sheet you have #id {color:black} and .class1 {color:red}, then #id {color:black} will be picked. However I don't see how this fact plays in this discussion. Feel free to enlighten me will ya?![]()
Rebuttal: Yes, if there are multiple CSS declarations that match a particular tag, the CSS declaration that includes an ID probably has higher specificity and will override the other declarations. For example say you have <div id="id1" class="class1"> this is a paragraph</div> and in your style sheet you have #id {color:black} and .class1 {color:red}, then #id {color:black} will be picked. However I don't see how this fact plays in this discussion. Feel free to enlighten me will ya?
Point #3
Argument: The choice you make will have an impact on microformat.
Rebuttal: How true. However we are discussing whether to use class or id to STYLE your HTML. If you need to use one or the other due to conforming to microformat specs then it's a different story. However even so, you would use class instead of id, and sticking with class gets my vote.
Rebuttal: How true. However we are discussing whether to use class or id to STYLE your HTML. If you need to use one or the other due to conforming to microformat specs then it's a different story. However even so, you would use class instead of id, and sticking with class gets my vote.
Conclusion
ID should only be used to uniquely identify an element so that you can getElementById() successfully in Javascript. You can use either id or class to style your HTML page.
If you have any questions let me know and I will do my best to help you!
Posts
