7 Principles for collating and optimizing CSS code

As a web designer (front-end engineer), you might remember that Web page size suggestion: A Web page (including HTML, CSS, Javacript, Flash, and pictures) should try not to exceed the size of 30KB, with the increasing Internet, network bandwidth is also developing rapidly, Many designers have no longer considered the ideal criterion for 30KB. With the increasingly popular CSS layout and JavaScript enhancements to the user experience of the site, this is becoming more common, especially for large web sites where only a single CSS file has exceeded the 30KB limit.

But even so, there are many guidelines to help you compress and optimize your CSS code after you've finished CSS layouts. CSS code optimization is not just to reduce the size of the CSS file, it can also make your CSS code more organized and more efficient. In bin go, you will learn more about CSS code optimization, which will help you more familiar with the normative CSS code. Familiarity with these concepts also allows you to become a more comprehensive web designer to write more optimized CSS code.

1. Use shorthand

If you do not know the shorthand now, then you write again, but fortunately, it is not difficult to learn. Using shorthand is one of the simplest ways to reduce your code. There is no better time to practice code shorthand than it is now, so what, come and take a look.

Margin, border, padding, background, font, List-style, and outline are all attributes that can be abbreviated. CSS shorthand is a declaration that no longer uses a different similar attribute ...

p {margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px; }

You can abbreviate them like this:

p {margin:10px 20px 30px 40px;}

The browser can interpret your defined CSS code with a different number of attribute values, see diagram:

The shorthand illustration above illustrates that different abbreviations can be made according to different attribute values, and this method works equally well for padding and Border-width properties.

The shorthand for the font is helpful in reducing the amount of code, and allows you to play a lot less letters. )

Example of a font shorthand. Note: If a property value is not defined, the definition of the secondary element is inherited or the default value is used.

If you are already familiar with the above shorthand method, you can also take a look at the following two short tutorials (in English) that may help you:
1.CSS Shorthand Guide (CSS shorthand)
2.Efficient CSS with shorthand properties (shorthand for efficient CSS attributes)

2. Avoid using hack

Jon Hick's blog hicksdesign.co.uk/journal using browser conditional comments

Hack is a bad thing, it will define the same code for different browsers, making CSS cumbersome. Now we know that using conditional annotations instead of hack, they are recognized in IE6 and IE7, and even the IE team recommends such use. Using conditional annotations serves CSS code that is specific to browser features, so smaller, core CSS code is used to serve standards-compliant browsers, and only when the requirements are present (ie, for example) will the additional CSS files be downloaded!

Let's look at the code example for IE6 using conditional comments:

<!–[if IE 6]>
<link rel= "stylesheet" type= "Text/css" href= "Ie6.css" mce_href= "Ie6.css" >
<! [endif]–>

This code allows IE6 to download additional IE6.CSS parsing its dedicated CSS code. Similarly, if the IE7 is only used to replace the above 6 with 7 on the line.

3. Use left white

Whether it's for your own reading or two of times to develop, you have to keep the CSS in good readability, leaving white a key role.

We do not encourage you to get a smaller CSS file, remove all the blank formatting, such as tab, line breaks, spaces, and so on. It is recommended that the nested code use a tab indent, with all properties on a separate line.

In contrast to the two types of CSS writing format, which format can you save more time to read and modify? The effect of leaving white is obvious, and it makes it easier to manage your code.

4. Removing redundant structures (frameworks) and resetting (resets)

Reset rules used by Nathan Smith's 960 Grid System CSS Framework

If you choose to use the CSS framework, including your own, if you check the code you will find that the framework contains some rules that do not apply to your current files and they can be deleted.

The Reset,yui Grid CSS used by reset and Eric Meyer's reset (reset) is now popular, resets can remove the default styles from different browsers, making the page consistent across browsers. However, they usually contain all the properties required for a large site, some such as <pre>,<code>,<sub>,<dfn>,<var> and so on will not be used at all for ordinary websites. Erase the ones you don't use. Eric Meyer will encourage you to do the same!

The framework and reset will be good for your work, but if you don't get rid of those you don't use, it will slow down your page's efficiency and readability.

5. Enable CSS to ensure future maintenance

Doug Bowman's stopdesign.com CSS uses a special selector for the layer

Another way to optimize CSS code is to separate CSS life into clear blocks of structure according to your habits. It is more convenient for you to re-examine the CSS file after a long time by separating the declaration of the CSS file from the comments and composing it, and then you will be much more efficient.

However, the storm Binbin more of a split layout style, which gives each layout a separate CSS file. Andy Clarke's "Beyond CSS" (transcending CSS) is also advocating this approach.

6. Keep track of your work

David Shea A detailed explanation of the tag guidance (Markupguide) in his website, mezzoblue.com .

If you are a member of a design team, it is important to keep your code consistent with the rules and to establish good communication with other idioms, and to establish a standard for the site. For example, a member of the team has come up with a good site tag switching interface that is documented to help other members of the team use the effect again, which avoids the bloat of HTML or CSS code.

Documenting the work consists primarily of the markup Wizard (markup guides) and the Style Sheet wizard (style sheet guides), which is not only applicable to the team, but also to the design work of a person (a person's "team"). After all, after a whole design project, after a year or even longer, it's just as strange when you come back and see the code you wrote yourself. In the future, you will learn from your own history how the CSS structure makes the Web page behave, or the side effect that the page has on form buttons.

Remember, be sure to develop a habit of writing comments for CSS.

7. Compression use

In order to save the browser more download load time, compression is a good solution, but limited to the time of release. YUI Compressor and Csstidy are experts in this area, and they are able to remove redundant code and verify that the attributes cover each other incorrectly.
Many popular editors, such as BBEdit, TextMate, and TopStyle, can help you format your CSS code the way you want it to look. You can also use PHP to process your CSS using server compression. You can find more CSS optimizations and compression for CSS tools.

One thing, these programs can reduce errors as much as possible, but are not perfect. Again, it is best not to use them to process files that contain CSS hack. This is another reason why those hack are stored in separate files.

Summary

Organizing and optimizing your code is not just for your CSS file size, it also includes maintainability and readability. The above principles are not just for CSS, they can also be applied to html,javascript and other programming languages. CSS files are not just for the end user to present to your site. The above principles can help the user experience as well as the developer experience. Applying these principles to your future projects will certainly achieve significant results.

Ps:http://blog.bingo929.com/7-principles-optimized-css.html

7 Principles for collating and optimizing CSS code