Teacher, I feel like you can also add a class to the Yiyi tag, right? Why not use him?

Question

Teacher, I feel like you can also add a class to the Yiyi tag, right? Why not use him?

Answer 1

In front-end development, we often use various excellent open source libraries and frameworks to improve our development efficiency and project quality. In these open source libraries and frameworks, we often need to use various tags, such as div, span, p, etc. These tags not only provide the basic layout structure for our interface, but can also finely adjust the interface layout and style through CSS styles. At this time, we will inevitably encounter a problem, which is how to add multiple different styles to the same label?

At this time, many developers may think of using feathered tags to solve this problem. Semantic tags refer to non-semantic tags that can add class attributes. Compared with semantic tags, semantic tags are more flexible and changeable. Different styles can be added to the same tag, and the applicability is wider. Moreover, using feathered tags can effectively reduce the nesting level of the HTML structure and improve the readability of the code.

However, in order to ensure the stability and maintainability of the project, we usually do not recommend using too many feathery tags. Let’s take a look at why it is not recommended to use feathered tags.

First of all, the feathered markup will add extra code. Although adding a class attribute to HTML will not have a big impact on page performance, in large projects and pages, if you use feathered tags too much, it will lead to a sharp increase in the amount of HTML code. The difficulty of maintaining the project. And in some extreme cases, excessive class attributes will also have a certain impact on page performance.

Secondly, using feathered tags will also make the code more complex. In order to facilitate maintenance and reading, we usually strictly adhere to semantics in HTML code, that is, use semantic markup to represent different content and structures. The use of semantic tags will destroy the semantics of HTML and make the code more complex and difficult to understand.

Finally, semantic markup will also affect the scalability of the code. During the development process, we often encounter situations where we need to add new styles or modify existing styles. If we use feathered tags, we need to repeatedly define and maintain each class in the CSS style. This adds The complexity of the code is also not conducive to the scalability of the code.

In summary, although semantic tags seem to be very flexible and practical, in project development, we still do not recommend overuse. Instead, we should try our best to comply with HTML semantic specifications and use semantic tags to organize Interface structure. Only in this way can the readability, maintainability and scalability of the project code be effectively improved.