Analyze the advantages of class over id when marking HTML elements

There are very complex HTML structures in web pages. If we use CSS to define related styles, we need to specify corresponding flags 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:

<p class=”header” id=”header” ></p>

Now there are more selection methods, such as attribute selectors, etc. However, it is not recommended to use it. Although the id and class can be omitted by using the attribute selector, 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 name to construct CSS selectors.
Since both id and class can mark HTML structures, what should I choose to use first? This is what this article will discuss.

The difference between id and class

Experienced friends can skip this part.

1. Uniqueness and repeatability

id can only be unique in the web page structure. If you specify the id of an element as aa, then in the web page There will no longer be an HTML element with an id of aa. 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. You specify the class of one element as bb, and you can specify the class of the next element as bb. These two elements can be applied with bb at the same time. style. In addition, you can also specify multiple class attribute values ​​​​for an element, so that you will get the styles of multiple attributes at the same time.

2. Different priorities in CSS

In the CSS selector, the priorities for applying styles to id and class are different. The style priority of id is higher than the style priority of class. If I specify the following style for a p with id aa and class bb:

#aa{background:red;}   
.bb{background:blue;}

Then the browser will Displayed with a red background.

3. Jump function

Using the id attribute can increase the jump function of the anchor tag. If we specify the id of a p on the page as aa, Then we add #aa after the current URL, and the page will immediately jump to the location of p with the id aa. For example: Baidu Encyclopedia chapter jump. Class does not have this function.

Why use class instead of id

What are the benefits of using class?

1. Reduce naming

Naming a complex structure is really a troublesome thing. If I use id to label, then I have to name each Give the structure a name. In web pages, there are many structures with the same style and effect (for example: unified button style), so we just write a common class style, and then assign this class to all structures that require the same style.

2. Highly reusable

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

.fl{float:left;display:inline;}   
.fr{float:rightright;display:inline;}

Write some classes as small and brief as possible, and then for a certain class that requires this style (for example: the above float) Write class directly on the element (for example: class="fl").
For 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 can achieve a high degree of style code reuse, and it is also more convenient to modify.

3. Low priority

The priority of class is higher than the element name and lower than id. The low priority feature can facilitate debugging and style coverage.

If we used id to mark an element before, 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 class, then we directly add an id to the element, and then construct a CSS selector of the element id to modify and overwrite it.

It is precisely because of these characteristics that we should try to use class to mark elements to facilitate later maintenance.

4.id is also a must.

class is not omnipotent. There are many places where we must use id to mark at the same time.

5. Anchor tag jump

If you want to use anchor tags to jump in the page, you can only specify the id of a certain jump target, because class It can be used repeatedly, so it does not have the jump function.

6. Used in input

When using input, label tags are usually used 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. The attribute value is the id value of the input. The other is to wrap the corresponding input with the label. Obviously the first method is more flexible and better, but you must specify an id attribute for the corresponding input.

In addition, some special requirements must also use id, which will not be summarized here.

Best usage combination

There have been many criticisms of class before, and some even said that W3C should abolish the class tag. Stalker m also used to have the id attribute. He is an avid user, but in practice, he increasingly discovers the advantages of classes and uses them instead.

A better combination is to use class to specify most elements and structures, and use id annotation for very few elements that require specific functions.

For more articles analyzing the advantages of class over id when marking HTML elements, please pay attention to the PHP Chinese website!