html id vs class best practice

Question

I have a pretty marginal question. I was wondering if it is better to use the id or class attribute when either would yield the same result. I'm not asking about the differences between id and class.

I know the answer. Should I use id if I'm sure it will be unique? Or, should I use class in every case except when id is absolutely necessary?

Basically, should I be as specific as possible or as general as possible?

Scenario: Say I have 3 divs. First, second, and third. Use classes or ids?

Did you use search tool from the site : https://stackoverflow.com/questions/2435525/best-practice-access-form-elements-by-html-id-or-name-attribute?rq=1 — , Oct 25 '17 at 05:29
Possible duplicate of [Best Practice: Access form elements by HTML id or name attribute?](https://stackoverflow.com/questions/2435525/best-practice-access-form-elements-by-html-id-or-name-attribute) — AVI, Oct 25 '17 at 05:29
From your scenario, use class, as you can only design one div with an ID — Carl Binalla, Oct 25 '17 at 05:32
As a rule of thumb you should always keep the specificity low, so that if in the future you'll need to override some css rule you'll be able to easily do so. In your case, as we don't have any information at all, I'd go for the rule of thumb and use classes. — Adriano, Oct 25 '17 at 05:35
@Adriano Thanks, this is the kind of answer I was looking for. I was pretty sure that sacrificing specificity for flexibility was the right way to go. — embracethefuture, Oct 25 '17 at 05:40
Ids *identify*, classes *classify*. Which you choose depends on whether you are identifying or classifying the element's content. — Alohci, Oct 25 '17 at 07:07

score 4 · Answer 1 · answered Oct 25 '17 at 05:35

Well you need to make a class which will be used in all div(s) and this class contain the common attributes.

and you need to make ID(s) for each div and contains the attribute which are different.

<style>
    .box{border:1px solid red; padding:10px; margin:4px; border-radius:4px;}
    .float-left{float:left;}
    .float-right{float:right;}
    #first{background:blue;}
    #second{background:pink;}
    #third{background:green;}
</style>

<div id="first" class="box float-left"></div>
<div id="second" class="box float-left"></div>
<div id="third" class="box float-right"></div>

The output will be 3 boxes have attributes in all divs which we added in box. first two boxes will be float left last box will be float right

and based on ID(s) every one have different background

score 1 · Answer 2 · answered Oct 25 '17 at 06:02

The usage of ID or Classes depends on various factors such as uniqueness of the element or hierarchy of the element in DOM structure. There is one more factor which is generally overlooked by most of the developers. The approach of your development process. If you are focused on TDD, i.e., Test Driven Development, it is better to use ID than class. As many test frameworks easily target elements on the basis of the ID rather than class. Also if you use ID, it is better to define the XPATH of the element. This makes your code easily testable. In platforms such as Selenium, it sometimes compels you to use ID's as it is difficult to use classes to define the xpath of the element. So for Unit Testing it is advisable to use ID rather than classes. So specific to your scenario, I would recommend you to use ID if you want your code to be Unit Tested or Integration Testing using Selenium or any such tool. And mark my words, quality of code is defined by if it is Testable or not.

score 0 · Answer 3 · answered Jul 20 '22 at 14:38

The best practice is to be as semantic as possible.

When you have a general style or need to target multiple elements, use classes. This will let you reuse code and thus make your CSS dry and maintainable.
When you have a specific style or need to target only one element, use ID's. This will make selecting your element much easier and you will be sure no other parts of the code are affected.

html id vs class best practice

3 Answers3