Why use class instead of ID to tag elements when writing CSS

Although the CSS code has been written to use the class name to mark the elements, but this is more of their own habits, today to do a summary of the problem.

Here are the specific reasons why this is done

One: The class class name of the element can have many, and the ID name only has one. By adding multiple class names to an element, you can control the style of the element more flexibly

<class= "Size Color"></div>//Size 200 * 200, The background color is pink. Size {    width:200px;    height:200px;}. color {    Background:pink;}

<div id= "Size color" ></div>//Unrecognized style

#size {    width:200px;    height:200px;} #color {    background:pink;}

Second: class and ID are not the same priority, mixed use may lead to the overall DOM structure of the style messy, in the late code maintenance caused great convenience.

CSS is all called Cascading style sheet, starting from the name, when writing CSS code to make the best use of DOM element hierarchy to achieve the style of different elements, as far as possible to avoid defining the priority of the elements such as!important and ID and class mix and other means.

Three: Elements with similar styles can define styles with the same class class name, reduce the amount of code, and the ID can only be used on one element.

Why use class instead of ID to tag elements when writing CSS