CSS document optimization, css document

CSS document optimization, css document

First, understand the rendering logic of CSS. It is searched from the last bit of the tag, for example :. myclass li a. First, it will traverse all the <a> and then see which <a> has <li> and which <li> has. myclass.

Therefore: 1. Too many levels will increase the CSS rendering workload.

As follows:

 

In addition, what else can be optimized?

2. Each attribute of the style in the figure excludes a single row. The larger the number of rows, the larger the file size, and it is hard to find and enter the crazy scroll wheel mode.

3. Long and long chain positioning. myclass li a span allows unfamiliar colleagues to constantly switch html and css documents to find the affected elements, affecting work efficiency. We recommend that you use clss with clear meanings.

4. Some common attributes can be extracted. During normal team work, the front-end and design will communicate some common styles before the design stage to the development stage, such as fonts and headers. There are also some common features, such as positioning and clearing floating attributes.

The following are optimized documents:

 

Of course, the efficiency improvement will not be obvious when the project volume is small. However, more benefits are the efficiency of subsequent maintenance. After all,As a technology, the purpose of work is to improve the company's income., Open-source and throttling.

Thank you for your advice.