But even so, now there is a lot of guidelines to help you complete the CSS layout in CSS code after the compression and optimization. The purpose of CSS code optimization is not just to reduce the CSS file size, it also allows you the CSS code more structured and more efficient. At Bin Go, you will learn more about CSS code optimization of knowledge, which can help you become more familiar with the normative CSS code. Familiar with these concepts so that you can become a more comprehensive web page designers, and thus to write more optimized CSS code.
1. The use of abbreviated
If you now also know is not short, you also write out-dated, but fortunately, it is not difficult to learn. The use of abbreviated codes are a way for the most simple way to reduce. Not suitable in practice than it is now time for abbreviated code, and so also what Check it out together.
Margin, border, padding, background, font, list-style and outline all of the property can be abbreviated. CSS shorthand is no longer using a different statement similar property ...
p (margin-top: 10px;
You can put them into a short like this:
p (margin: 10px 20px 30px 40px;)
Browser can be a different number of attribute values to explain you the definition of the CSS code, see the diagram:
Simplified diagram of the above descriptions are based on different attribute values can be different initials, this approach also applies to padding and Border-width property.
Font shorthand for narrowing the amount of useful code, but can you play a lot of smaller letters;)
Font abbreviated example. Note: If there is no definition of a property value, then Vice-class elements will inherit the definition or use default values.
If you have been well aware of the above simplified method, you can also look at the following two short tutorial (English), you would perhaps be helpful:
2. To avoid the use of Hack
Jon Hick's blog
Hack is a bad thing, it would for different browser, like the definition of the code, making CSS burdensome. We now know that conditions for use of the Notes to replace the hack, they are in IE6 and IE7 are recognized, and even IE team also recommend such use. Note the use of conditionality in line with the Services browser-specific CSS properties code, therefore, a smaller core of the CSS code for the Service to comply with the standards in the browser, and only when demand conditions (such as IE), will go download extra CSS file!
IE6 look at the following conditions of use of annotated code examples:
<! - [If IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" mce_href="ie6.css">
<! [endif] ->
This code allows IE6 to download extra ie6.css resolve it the exclusive use of css code. Similarly, if only for IE7 put above the replacement of 6 and 7 on the list.
3. The use of blank
Whether reading for themselves or a secondary development, we must allow CSS to maintain good readability, blank on the act as a key role.
We do not encourage you in order to get a smaller CSS file, it removed all the blank format, such as tab, newline, spaces, and so on. Nested code here to recommend the use of a tab indentation, all his property independent.
Compare the picture above the two CSS written format, a format which allows you to save more to read and modify the time? The effect of blank Obviously, it makes you easier to manage code.
4. Remove redundant structures (frameworks) and reset (resets)
Nathan Smith of the
If you choose to use CSS framework, including the Writing yourself, if you go check the code must be found that the framework contains a number of rules does not apply to you the current document, they can be deleted.
We can think of have reset,
framework and the reset will be a very good job of helping you, but if you do not remove those you do not have access to use, it will drag you the efficiency and readability of the page.
5. So that CSS can guarantee the future maintenance
Another way to optimize the CSS code you are in accordance with the habits of life will be divided into clear CSS block structure. The CSS file a statement with notes separated and typesetting, can be more convenient for a long time after his re-trial of the CSS file, the efficiency of that time you will be much higher.
However, the Storm more Binbin of advocating the kind of split the layout style, that is, give each of the layout of a separate CSS file. Andy Clarke's "Beyond the CSS" (Transcending CSS) is one book to promote this approach.
6. Record your job
David Shea, in his web
If you are a design team of one, then the code so that you maintain the consistency of rules and set up with other idioms good communication is very important, but also set up a web standard. For example, a member of the team came up with a good tag to switch web interface, record of these ideas and comments will help other members of the team once again use this effect, so be able to avoid the HTML or CSS code bloated.
Record job mainly includes marking Wizard (markup guides) and style sheet wizard (style sheet guides), this kind of work does not just apply to the team, but also equally applicable to a person's design work (a person's "team"). After all, in the integrity of a design project, after a year or even longer, when you come back to see them write their code once, it will feel very strange. The future through their own you will understand that once the records at those CSS structure are shown how to make web pages or the pages of the play button on the form side-effects.
Remember, we must cultivate for CSS Writing Notes habits.
7. Compression using
Browser in order to make savings more time to download a load, compression is a good solution, but is limited to release time.
Much popular editor such as BBEdit, TextMate, and TopStyle all be able to help you format your CSS code you want to look into. You can through the server compression technology
There is that these procedures will be reduced as far as possible, errors happen, but not perfect. Similarly, it is best not to go with their deal with the document that contains CSS hack. This is also another so that the hack is stored in the other document the reasons.