Control page file size by simplifying CSS implementation

Although for today's bandwidth, the size of a Web page file is only a small amount of k, but how to reduce this to the k to calculate the minimum page file is one of the issues that web designers should consider.

All week, without affecting the entire Web page architecture and functionality, the smaller the page file, the better, because the smaller web page files in favor of the browser to the Web page interpretation time to shorten, natural visitors do not have to face waiting for the slow appearance of the Web page of the fidgety, this point for those who have less bandwidth and slow Internet users are still obvious. Imagine that you would like to open a site when the entire site immediately present in front of you? Still like to spend more than 10 seconds or even a few Kushiro to see the entire site 1.1 points by the browser to explain it?

In the table layout era, the code countless times as the table in the page repeated, resulting in the entire Web page file become bloated, code readability also to the minimum, the browser's interpretation time naturally increased a lot. And since DIV+CSS layout instead of table layout, all of this has been greatly improved, so that the table returned to its original used to display data position, and the layout to Div+css to do, so that the readability and reusability of the code has been improved, and div+ The more important point of CSS is to distinguish between the performance and structure of the Web page, and no longer need to change the structure of the entire Web page file for performance.

Even if the div+css layout of the previous table layout of the code to the minimum, but for web designers, how to minimize the size of the page file is always worth exploring and pursuing a problem.

Look at the following code:

　　#header {　　 margin-top:10px;　　 margin-right:15px;　　 margin-bottom:10px;　　 margin-left:15px;　　 backgroung-color:#333333;　　 background-images:url(Images/header.jpg);　　 }

Such a piece of CSS code, the structure is very clear, very clear, readable, but such a piece of code does not do streamlining, that is, it is the most original CSS code, the following look at the streamlined code:

　　#header {　　 margin:10px 15px;　　 backgroung:#333 url(Images/header.jpg);　　 }

In CSS, there is a composite attribute, that is to say, many attribute parameters can be integrated together, such as the above "margin-top;" Margin-right; Margin-bottom; Margin-left; " can be consolidated into a "margin" attribute and then equipped with parameters.

With this, we can basically further streamline the code in the original CSS code. And the structure of this writing is also reasonable, the readability is equally strong. But it's not enough to be streamlined to the full. In order to make the structure of this CSS code clear, we use a space to change lines and so occupy space, if these occupy space to remove it?

　　#header{margin:10px 15px;background:#333 url(Images/header.jpg);}

This sentence replaces the above section of code, so that the code has been streamlined to maximize, of course, does not recommend that everyone write, so that the CSS code in the readability of the writing is far from the paragraph, unless you have to write the code have full confidence.

In a CSS file in the same site, inevitably, there will be different IDs or classes with some of the same attributes, if the ID or class by separate to write, in the CSS file will undoubtedly generate duplicate code, and we have to try to simplify the size of the CSS file, then "eliminate" This part of the repetitive code becomes imperative.

Look at the following section of CSS code:

　　#header{margin:10px 15px;background:#333 url(Images/header.jpg);}　　#content{margin:10px 15px;padding:10px;background:#999;}　　#copyright{margin:10px 15px;border:1px solid #f00;}

There is an identical property "margin:10px 15px" in each of the three IDs above, and if this is done separately, the three IDs will maintain their separate relationships but generate duplicate code, which we can write in the following format:

　　#header,#content,#copyright{margin:10px 15px;}　　#header{background:#333 url(Images/header.jpg);}　　#content{padding:10px;background:#999;}　　#copyright{border:1px solid #f00;}

Changing the ID above to class is the same. In this way, we succeeded in "wiping out" the repetitive code. But if you have the same ID or class too many of the same attributes, it will inevitably cause code readability to be low and low, so in addition to the same attributes are class when there is another way of writing:

　　.main{margin:10px 15px;}　　.header{background:#333 url(Images/header.jpg);}　　.content{padding:10px;background:#999;}　　.copyright{border:1px solid #f00;}

Of course, this type of writing, the call when the writing is not the same as usual.

This kind of writing can also achieve the effect, and will not be afraid of having the same attributes of more classes and resulting in poor code readability, but it is worth noting that this type of writing for the ID is not valid, whether there is an ID or all of the ID, will cause this code is invalid.