Analyzes the advantages of class over id when marking HTML elements. htmlclass

Analyzes the advantages of class over id when marking HTML elements. htmlclass

This article mainly introduces the advantages of class over id when marking HTML elements. The CSS priority of id is higher than that of class, therefore, it is more convenient to construct the id annotation element based on the class when you modify the style. For more information, see

There is a complicated HTML structure in the webpage. If we use CSS to define relevant styles, We need to specify the corresponding flag for these structures, then, write the corresponding CSS selector to get the style they have granted. The two most common annotation attributes are id and class. For example:

 

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

There are more selection methods, such as attribute selector. However, it is not recommended to use the attribute selector. Although the id and class can be omitted, it is inconvenient to maintain later, the compatibility of earlier browsers is poor, and the rendering efficiency of browsers is affected. Therefore, although more options are available, we recommend that you use id, class, and element name to construct the CSS selector.
Since both id and class can be labeled with HTML structure, what should I choose first? This is what will be discussed in this article.

Difference between id and class

Experienced friends can skip this part.

1. uniqueness and repeated availability

Id can only be unique in the webpage structure. If you specify the id of an element as aa, an HTML element with id as aa cannot appear in the webpage. Although powerful browsers support multiple duplicate IDs and assign corresponding styles, this is not allowed by standards.

On the contrary, the class can be used repeatedly in the webpage structure. you specify the class of an element as bb and the class of the next element as bb, the two elements can be applied to the bb style at the same time. In addition, you can create multiple class attribute values for an element, so that you can obtain more attribute styles at the same time.

2. Different priorities in CSS

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

Copy the content to the clipboard using CSS Code.

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

The browser will display a red background.

3. Jump Function

You can use the id attribute to add the anchor jump function. If we specify the id of a p as aa on the page, we add # aa after the current URL, the page will jump to the location of p with id aa immediately. For example, Baidu encyclopedia chapter jump. The class does not have this function.

Why use class instead of id?

What are the advantages of using class?

1. Reduce naming

It is really troublesome to name a complex structure. If I use id to mark it, I must name each structure. On the web page, there are many styles with the same structure and effect (for example, unified button styles), so we only write a general class style, assign this class to all the structures that require the same style.

2. High Reuse

The class can be applied to other structures repeatedly and multiple classes can be applied to an element. In this way, you can use a class style highly. The extreme practical application is the atomic class, for example:

Copy the content to the clipboard using CSS Code.

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

Write some classes as short as possible, and then directly write the class (for example, class = "fl") for an element that requires this style (for example, the floating above ").
In general, for some structures that require the same style, write only one style, and assign the same class to these structures, so as to achieve high style code reuse, it is also easy to modify.

3. Low priority

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

If we have previously used an id to mark an element, we can only modify the corresponding CSS style code or use a style to modify the style of this element! Important emphasizes the syntax to overwrite the original style.

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

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

4. id is also required

Class is not omnipotent either. In many cases, we must use IDs to mark them at the same time.

5. Jump with an anchor flag

To use the anchor tag to jump to a page, you can only specify the id of a jump target. Because the class can be used multiple times, the jump function is not available.

6. Used in input

When using input, the label is usually used to describe the input function. There are two ways to associate label with input: one is to use the label for attribute, the property value is the id value of input, and the other is to wrap the label with the corresponding input. Obviously, the first one is more flexible, but you must specify an id attribute for the corresponding input.

In addition, id must be used for some special requirements.

Best Combination

There have been many comments criticizing the class, and even some comments that W3C should abolish the class tag. The hidden Walker m was once an avid user of the id attribute. However, in practice, more and more advantages of class are discovered and use class.

A better combination is to use class to specify the vast majority of elements and structures, and use id labels for elements that require specific functions in a few cases.