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.
Related Posts of Collate and CSS code optimization principle 7
Phase I: Put the following three plug-ins running rails. spree active_merchant OpenID_authentication_plugin: gem update spree Open source e-commerce applications. checkout down, we need to localize, the adjustment under the css and added so that a sm ...
Rails framework are at the first time in July 2004, its R & D is the 26-year-old Danes David Heinemeier Hansson. Different from complex Web development framework, Rails is more in line with actual needs and more efficient Web development framework. Ra
/ ** Disclaimer: the text content from the network ** / Lot of people think that the project manager is always associated with "the ideal and the glorious" concomitant, in fact, as a interested in improving the flow of Chinese software deve ...
Information Address: http://thinhunan.cnblogs.com/archive/2006/04/01/DeveloperNotesForPrototype.html Extract 1, $ F () function Function: Return of any form input control value, the parameters are the element id or the element itself Example: <script
Understand the principle with the practice, details the relationship between thought, we'll go have selectively study the details, we must work on the details because the details are important to you to use the technical details of implementation ...
What is object-oriented design? Contains what? The benefits of it are what? Required to pay what you do? In today's age, ask these questions seem to be foolish, because this year almost every software developer knows how to use some sort of objec ...
Super Medium ejb hate. . . . . . . . . . . . . . . . . . . ================================================ To configure a Message Driven Bean in a different application server parameters are not the same. Currently only passed the test jboss. Message Dri
The use of hibernate, implementation of data persistence. Has the following several processes. One configuration database connection information. Hibernate.config 2 configuration mapping. 3 use: the use of the process are the following steps: 3.1: Ge ...