Collate and CSS code optimization principle 7

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

分类:AJAX 时间:2009-04-11 人气:1550
blog comments powered by Disqus


  • 2008 Best Web Design / front-end development skills. Script and resource summary 2009-04-11

    Tools & Web Application 13 may make you say "Thank You" the essential open-source application 14 free tools that let you know why people give up access to your website 40 + CSS Generator 74 we may have forgotten the fit of the great web desi

  • SEO Learning: Web page search engine optimization and keyword positioning guide 2011-06-18

    How can we make a full compliance with search engine optimization a standard page? If you're doing search engine optimization, you may have heard many times the above questions. Unfortunately, ah, there is no one size fits all and very definite answe

  • Bamboo Web Design and Development Framework Manual 2011-06-01

    Directory  Contents Introduction file directory command line utility structure of the request object naming conventions Bamboo Application directory structure URL request processing forms processing route processing upload template debug rendering m

  • Web design and development of the ultimate resource Daquan 2010-03-30

    Web technology by leaps and bounds, Web design and development tool for those who can choose more and more, Web developer skills are no longer limited to HTML and server-side programming, but also proficient in a variety of third-party resources, the

  • Web design and development of the ultimate resource Daquan (A) 2010-03-18 Rapid Web technology, Web design and development tool for those who can choose more and more, Web developer skills are no longer limited to HTML and server-side programming, but also proficient in a variety o

  • Web Design and Development's tangle: W3C validation with non- 2010-06-12

    W3C validation for a lot of Web design and development who are entangled in their web page to place a verification button, click later, when you see the W3C for you given the green check mark all the time, satisfaction arises spontaneously, but on Ve

  • MyEclipse Web Service under development 2010-06-16

    Development environment Sun Java 5 + Eclipse 3.2 + MyEclipse 5.0.0. Outline This article describes the use of MyEclipse Web Service to quickly develop and test a HelloWorld Web Service, including: 1. Introduces the basic concepts of MyEclipse Web Ser

  • WEB AWCMS best development framework (a) 2010-10-02

    awcms mainly used for web intelligence generation. Only need a few simple configuration templates and several XML files. Can generate a Web site. Students can also interface framework, custom features. awcms original design aims to improve developmen

  • Ultimate Web Design and Development Resource Kit 2010-11-18 Rapid Web technology, Web design and development tool for those who can choose more and more, Web developer's skills are no longer limited to HTML and server-side programming, but also proficient in a variety of

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 闽ICP备15018612号

processed in 0.311 (s). 13 q(s)