The difference between id and class, should I use class or ID?

In the previous two articles, we talked about the relevant knowledge and how to use class and id respectively, but in actual projects, how should we choose, class or id?

Let’s review the differences between the two first!

1. ID is unique and class is universal, so the same ID can only be used once on a page, while class can be used without restriction.

2. The priority of id is higher than that of class! As follows:

2. #p1{color:red}

3. .p2{color:green}

4. ##

   This is a paragraph

The above is an example, in the p element The text is red instead of green because the priority of id is higher than that of class.

In fact, the usage of id and class is quite simple, but if you want to write elegant css code, you need to pay attention to some things. The project I am currently working on adopts the agile model, with multiple people working together to develop it.

The most painful thing is that the id and class are all over the place in the entire HTML document, which is a pitfall when it comes to maintenance! Recently, I saw someone’s experience on using id and class. I think it’s good. The summary is as follows:

css is only written with class and has special class general and private module naming. ID is unique and prioritized. Too high is only used as a hook for js to operate dom without adding styles. If jq or zepto is used, the class name of the

operation generally does not add styles. The class naming in this part is determined by js like the id. This is more suitable for large-scale, multi-person maintenance and long-term iteration projects.
The class name of css is completely separated from the id and class of js operation. In this way, changes in the product's ui or product interaction logic do not affect each other, making it easy to maintain.

To summarize: js tries to operate id, and class tries to operate css!

Of course you have to practice this yourself! It is suitable for me only for the projects I am currently working on! That’s it for today’s summary. Please correct me for any shortcomings.

For more information about the difference between id and class, whether to use class or ID, please pay attention to the PHP Chinese website!