Collate and CSS code optimization principle 7

sponsored links
This article The original English text of

As a web designer (Front-end Engineer), you may recall that once the page size recommendations: a web page (including HTML, CSS, Javacript, Flash and picture) as far as possible not to exceed the size of 30KB, with the growing Internet, network bandwidth also the rapid development of a lot of designers are no longer consider this the ideal criteria 30KB. With more and more welcome to CSS layout and Javascript enhanced web user experience, making this phenomenon more and more widespread, especially for large web sites, only a CSS file has exceeded the upper limit of 30KB.

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;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;)

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:

Collate and CSS code optimization principle 7

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;)

Collate and CSS code optimization principle 7

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:
1. CSS Shorthand Guide (CSS shorthand guide)
2. Efficient CSS with shorthand properties (Efficient shorthand CSS attribute)

2. To avoid the use of Hack

Collate and CSS code optimization principle 7

Jon Hick's blog / journal Conditional use your browser Notes

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.

Collate and CSS code optimization principle 7

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)

Collate and CSS code optimization principle 7
Nathan Smith of the 960 Grid System CSS framework used to reset the rules of

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, YUI Grid CSS Reset and use Eric Meyer's reset ( Reset) Currently very popular, Resets can remove different browser's default styles, making the page in various browsers consistent performance between. But they usually contain a large web of all necessary property, some such as <pre>, <code>, <sub>, <dfn>, <var> property and so on for the website for the general would not use, delete out of those you do not have access to. Eric Meyer will also encourage you to do!

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

Collate and CSS code optimization principle 7

Doug Bowman's CSS for layer using special selector

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

Collate and CSS code optimization principle 7

David Shea, in his web Detailed guidance on the tag ( markup guide ).

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. YUI Compressor And CSSTidy Is one such expert, they can remove redundant code, checking each property coverage error.
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 The use of PHP You deal with the CSS. You can find more CSS optimization and compression CSS Tools .

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.


Collation and optimized code is not only for your CSS file size, also includes the maintenance and readability. The above principle is not just for CSS, they can apply to HTML, Javascript and other programming languages. CSS file does not only give you a website for the end-users. The above principle can help the user experience and developer experience. Application of these principles to your future projects, must be able to obtain significant results
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Collate and CSS code optimization principle 7

  • rails plugins to do an e-commerce systems

    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 version of the change (1) - rails of the introduction

    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

  • Flex and JavaScript interoperability

    Flex and JavaScript interoperability Flex generated swf file will eventually be deployed to ActiveX pages (html, jsp, asp, aspx, etc.), because ActiveX is an independent body it can not directly access the page element data, same asp, aspx, etc. Serv ...

  • Project manager qualities

    / ** 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 ...

  • Read "prototype.js 1.4 Developer Edition Manual" excerpt

    Information Address: Extract 1, $ F () function Function: Return of any form input control value, the parameters are the element id or the element itself Example: <script

  • Great Design

    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 ...

  • Object-oriented design principles 11

    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 ...

  • JS charts extjs implementation tools can be combined

    OpenFlashChart brief introduction by valensoft 2009-1-10 8:29:00 OpenFlashChart is an open source Flash and Javascript to the technical foundation for the free chart, using it to create some very useful analysis of the effect of the statements of the char

  • jboss ejb3 Message Driven Bean

    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

  • hibernate to use the principle of

    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 ...

blog comments powered by Disqus
Recent Entries
Tag Cloud
Random Entries