Dissecting the advantages of class over id when annotating HTML elements

There are very complex HTML structures in web pages. If we use CSS to define related styles, we need to specify corresponding tags for these structures, and then write corresponding CSS selectors to obtain the styles assigned to them. The two most commonly used annotation attributes are id and class, for example:

There are now more selection methods, such as attribute selectors, etc. However, it is not recommended. Although the id and class can be omitted by using attribute selectors, there are problems such as inconvenience in later maintenance, poor compatibility with early browsers, and affecting the rendering efficiency of the browser. So, although there are more options, I still recommend using id and class and element names to construct CSS selectors.
Since both id and class can be used to mark HTML structure, which one should I choose first? This is what this article will discuss.

The difference between id and class

Experienced friends can skip this part.

1. Uniqueness and repeatability

The id can only be unique in the web page structure. If you specify an element with an id of aa, then another HTML element with an id of aa cannot appear in the web page. Although powerful browsers will support multiple duplicate IDs and assign corresponding styles, this is not allowed by the standard.

On the contrary, class can be reused in the web page structure. If you specify the class of an element as bb, you can also specify the class of the next element as bb. The two elements can be applied with the style of bb at the same time. In addition, you can specify multiple class attribute values ​​for an element, so that the styles of multiple attributes are obtained at the same time.

2. Different priorities in CSS

In CSS selectors, styles applied to id and class have different precedence. The style priority of id is higher than that of class. If I specify the following style for a div with id aa and class bb:

Then the browser will display a red background.

3. Jump function

Using the id attribute can add the anchor tag jump function. If we specify the id of a div as aa in the page, then we add #aa after the current URL, and the page will immediately jump to the location of the div with id aa. For example: chapter jump in Baidu Encyclopedia. Classes do not have this functionality.

Why use class instead of id?

What are the benefits of using classes?

1. Reduce naming

It is really troublesome to name complex structures. If I use id to label them, I have to give each structure a name. On a web page, there are many structures with the same style and effect (for example, a unified button style). In this case, we only need to write a common class style and assign this class to all structures that need the same style.

2. Highly reusable

Classes can be reused in other structures, and multiple classes can be applied to an element, so a class style can be highly reused. A more extreme practical application is atomic classes, for example:

Write out classes as small and concisely as possible, and then apply the class directly to the element that needs the style (e.g., the float above) (e.g., class="fl").
In general applications, for some structures that require the same style, you only need to write one style and then assign the same class to these structures. This will achieve a high degree of style code reuse and is also easier to modify.

3. Low priority

The priority of class is higher than element name but lower than id. This low priority feature can be used to facilitate debugging and style overriding.

If we have previously used an id to mark an element, and we want to modify the style of this element, we can only modify the corresponding CSS style code or use the !important emphasis syntax for a certain style to overwrite the original style.

If the element is marked with a class, we can directly add an id to the element, and then construct a CSS selector of the element id to modify and overwrite it.

Because of these characteristics, we should try to use classes to mark elements to facilitate later maintenance.

4.id is also required

Class is not omnipotent. There are many places where we must also use id to mark.

5. Anchor tag jump

If you want to use an anchor tag to jump in a page, you can only specify the id of a jump target. Because the class can be used repeatedly, it does not have the jump function.

6. Used in input

When using input, you usually need to use a label tag to describe the function of the input. There are two ways to associate a label with an input. One is to use the for attribute of the label, where the attribute value is the id value of the input. The other is to wrap the label around the corresponding input. Obviously the first one is more flexible and better, but you must specify an id attribute for the corresponding input.

In addition, there are some special requirements that require the use of id, which will not be summarized here.

Best combination of use

There have been many criticisms of class in the past, and some even said that W3C should abolish the class tag. Stalker m was once an avid user of the id attribute, but in practice, he increasingly discovered the advantages of class and started using it instead.

A better combination is to use class to specify the vast majority of elements and structures, and use id to mark the very few elements that require specific functions.