How can we write highly efficient CSS? There are a lot of small issues that beginners don't pay attention to. When these problems are concentrated, the problem will be big.
1. * {margin: 0; padding: 0;} do not use global Reset:
Since it is a global definition, it will process all the labels and increase the browser resolution time. Some labels do not need to be processed,
2. Differences between display and visibility
They are used to set or retrieve whether to display objects. Display hidden objects do not retain physical space, and visibility is the physical space occupied by hidden objects. Resources are consumed when the browser renders the occupied physical space.
Therefore, we do not agree to use visibility: hidden;
3. Difference between border: none; and border: 0;
Some of you have never noticed the two. Code The difference in HTML display is certainly the same, but basically they are different using border: 0. Although there is no difference between reality and none, it retains the two attributes of color and style.
Therefore, we do not agree to use border: 0;
4. The background image must not be too small to be tiled.
Although the file size is very small, a background image with a width and a height of 1 px needs to be tiled for 2500 times. Improving the rendering efficiency of background images is related to the image size and size. The maximum image file size is approximately 70 KB.
Therefore, we do not agree to use tiled background images below 8 Px in width.
5. ie Filter
In addition to resource consumption, the IE filter also has compatibility issues. The PNG transparent filter can be used to avoid the use of the GIF or JPG transparent method. We recommend that you only apply GIF transparency to IE6, because IE7 and later support PNG transparency.
I do not agree to use the IE filter.
6. hexadecimal color value pairs of digits and case
When writing hexadecimal color values, you may use lower-case letters or omit them into three digits. No data is found to prove whether this method affects the rendering efficiency of the browser, however, the default hexadecimal color value is uppercase and 6-digit. Lower rendering efficiency without taking risks in unknown situations.
We do not agree to use color: # f3a; we recommend that you use color: # ff33aa;
7. Do not add additional labels to describe the class or ID.
If you have a selector that uses ID as the key selector, do not add additional tag names. Because ID is unique, you should not reduce the matching efficiency for a reason that does not exist.
8. Select the most special class to store the selector.
One of the biggest reasons for reducing system efficiency is that we use too many choices in the label class. By adding a class to an element, we can further classify the class into class classes, so that we don't have to waste time matching too many choices for a tag.
9. Avoid descendant Selection Characters
The descendant selector is the most resource-consuming selector in CSS. It is really resource-consuming, especially when the selector uses a label class or a common class. In many cases, what we really want is the subselector. Unless explicitly stated, it is strictly prohibited to use the descendant selector in the ui css.
10. Code abbreviations
There is nothing to say about this. I believe everyone knows it. If you don't know it clearly, I will write an article about the code abbreviation later.Article Http://bbs.blueidea.com/thread-3073774-1-1.html |