CSS Specification-optimization scheme

Value Abbreviations

Abbreviated values can reduce the size of the CSS file and increase readability and maintainability.

But not all values must be abbreviated, because when a property's value is abbreviated, all items are always set once, and sometimes we don't want to set some items in the value.

/**/. F-mgha{margin-left:auto;  Margin-right:auto;} /*  */. M-link{padding:6px 12px

Common abbreviations are described in code format.

Properties to avoid performance

The properties of the columns listed below may cause rendering performance issues. But sometimes demand is bigger than everything ...

/** *. class{width:expression (this.width>100? ') 100px ': ' auto ');} /*  */. class{filter:Alpha (OPACITY=50)

Picker Merge

A combination of CSS selectors that can define multiple selectors at once, saving you a lot of bytes and valuable time.

We typically combine a series of selectors that define the same or have most of the same values (indeed, because they are related) together (in the same way as a comma) to define them uniformly.

/*The following is a clear floating operation for the layout class selector*/. G-hd:after,.g-bd:after,.g-ft:after{Display:Block;Visibility:Hidden;Clear:both;Height:0;content:".";}. g-hd,.g-bd,.g-ft{Zoom:1;}/*Usually, background always takes up a lot of bytes, so in general, we all call this uniformly.*/. m-logo,.m-help,.m-list Li,.u-tab li,.u-tab Li a{background:URL (.. /images/sprite.png) no-repeat 9999px 9999px;}. M-logo{background-position:0 0;}/*The following is a component of the wording, because it is true that many elements are linkage or related, so the use of a combination of the wording, can be easily understood and modified*/. U-tab Li,.u-tab Li a{Display:inline;float: Left;Height:30px;Line-height:30px;}. U-tab Li{margin:0 3px;}. U-tab Li a{padding:0 6px;}

Background Map Optimization Merge
Optimization of the picture itself:

Image quality requirements and image file size determine what format you use to display better image quality with smaller image files.
When the image color is too rich and there is no transparency required, it is recommended to use JPG format and save it for high quality.
When the picture is too rich and transparent or translucent or shaded, it is recommended to use the PNG24 format and to degrade the IE6 PNG8 (or use filters in the last resort).
When the image color is not too rich, whether there is no transparency requirements, please use the PNG8 format, in most cases it is recommended to use this format.
When a picture is animated, only the GIF format is used.
You can use the tool to compress the picture again, but only if it doesn't affect color and transparency.

Merging of multiple images:

The space between individual icons must be retained, and the size of the void is determined by the size and display of the container. The advantage of this is that both the "fault tolerance" and the maintainability of the image are improved.
The arrangement of icons is also determined by the size of the container and the way it is displayed. The arrangement is divided into the following categories: horizontal arrangement (limited container width), vertical arrangement (container height is limited), diagonal arrangement (container width is not unlimited), left (container background left), right-hand arrangement (container background right), Horizontal center arrangement (container Background horizontal center), Vertical center arrangement (container Background vertical center).
After merging the image size should not exceed 50K, the recommended size between 20k-50k.
In order to guarantee the picture quality after many changes, keep a copy of the PSD original diagram, modify and add all in the PSD, and finally export PNG.

Merge by Category:

Not all the icons are merged in a picture is the best, in addition to control the size of the picture should also pay attention to the following methods.

According to the arrangement of the picture, the same arrangement of the picture to merge, convenient style control.
According to the module or component, the same module or component of the picture is merged to facilitate the maintenance of modules or components.
According to the size of the picture, the same size or similar images can be combined to make full use of the picture space.
According to the color of the picture, the color of the same or similar pictures to merge, to ensure that the color of the merged picture is rich, can prevent color distortion.
Combine the above methods.

avoidance of Hack

When you avoid the costly, you can use hack, such as you need to add a lot of html or write a lot of CSS is not worth the candle.
A wealth of practical experience can help you understand common problems and avoid them with a variety of different ideas, so the experience and thinking methods are important here.
According to your own ability to solve the problem of hack, we do not recommend you use a method you are not sure to avoid hack, because you may be the method itself there is no problem you found.

If CSS can do it, do not use JS

Let CSS do more things, to reduce the amount of JS development.

Using CSS to control the interaction or visual changes, JS only needs to change the classname.
Use CSS to change multiple node styles at once, avoid multiple rendering and improve rendering efficiency.
If your product allows incompatible versions of the browser, then the animation implementation can be handed to CSS.

easy to read and modify

If you have done all the requirements of the CSS specification, naturally you have written a nice CSS that is easy to read and modify.

Of course, code formatting and naming conventions are relatively important.
A clear CSS Module

If you do the naming rules, your CSS module is clearly visible.

Using "annotations" to illustrate that each module is particularly important for larger CSS files.
File compression

Reasonable writing CSS can greatly reduce the size of the file, when finished, without damaging the contents of the file, do everything possible to compress your CSS, you can use the compression tool to the comments and extra spaces, line-breaking removed.

The compression tool is described in the "Html/css Tools" section.
Other format optimizations

optimization methods See Code formats. Http://www.cnblogs.com/LoveOrHate/p/4448833.html

CSS Specification-optimization scheme