How can I write highly efficient CSS?

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.