The difference between ID and class, using class or ID

In the previous two articles we talked about the knowledge and how to use class and ID, but how do we choose the class or ID in the actual project?

First look at the difference between the two!

1.id is unique and class is universal, so a page can only be used once for the same ID, and class can be used without restrictions.

The priority of 2.id is higher than Class! As in the following example:

2. #p1 {color:red}

3. . P2{color:green}

4. <p id= "P1" class= "P2" > This is a paragraph </p>

Above is an example where the text in the P element is red rather than green, because the ID has precedence over class.

In fact, the ID and class usage is quite simple, but to write elegant CSS code, that is to pay attention to some things. Now the project of their own use of agile mode, multi-person cooperation development,
The most painful is the entire HTML document ID and class flying, maintenance it called a pit Ah! Recently saw a personal experience with the use of ID and class, I feel good, summarized as follows:

CSS is only written in class and has a special class generic and private module naming, the ID is unique and the priority is too high only as the JS operation Dom Hook all do not add style, if using JQ or Zepto,
The class name of the operation is generally not styled, and this part of the class name and ID is set by JS. This is better suited for large, multi-person maintenance projects that require long-term iterations,
The class name of CSS and the ID of the JS operation, class classes completely separate, so that the product UI or product interaction logic changes do not affect each other, easy to maintain.

Summary sentence: JS try to operate id,class as far as possible operation Css!

Of course, this also to practice their own ah! I am suitable also only for the current project only! Today's summary is here, the shortcomings also please correct me.