CSS specifications

Value abbreviation

Abbreviating values ​​can reduce CSS file size and increase readability and maintainability.

But not all values ​​must be abbreviated, because when the value of an attribute is abbreviated, all items will always be set, and sometimes we do not want to set some items in the value.

/* 比如我们用下面这个样式来让某个定宽的容器水平居中，我们要的只是left和right， * 而top和bottom不是这个样式要关心的（如果设置了反倒会影响其他样式在这个容器上的使用）， * 所以这时我们就不需要缩写 */.f-mgha{margin-left:auto;margin-right:auto;}/* 比如下面这个模块的样式设置，我们确实需要设置padding的所有项，于是我们就可以采用缩写 */.m-link{padding:6px 12px;} 

Please refer to the code format for commonly used abbreviation methods.

Avoid performance-consuming attributes

The attributes listed below may cause rendering performance issues. But sometimes demand outweighs everything...

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

Selector merging

That is CSS selector combination, which can define multiple selections at one time processor, saving you a lot of bytes and valuable time.

Usually we will group together (using commas) a series of selectors that have the same definition or have most of the same attribute values ​​​​(actually the same because they are related) to unify the definition.

/* 以下对布局类选择器统一做了清除浮动的操作 */.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;}/* 通常background总是会占用很多字节，所以一般情况下，我们都会这样统一调用 */.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;}/* 以下是某个元件的写法，因为确实很多元素是联动的或相关的，所以采用了组合写法，可以方便理解和修改 */.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 image optimization and merging
Optimization of the image itself:

Image quality requirements and image file size determine what format of image you use. Use smaller image files to present larger images. Good image quality.
When the image is too colorful and does not require transparency, it is recommended to use jpg format and save it at a higher quality.
When the picture is too colorful and has transparency or translucency requirements or shadow effects, it is recommended to use png24 format and perform png8 degradation on IE6 (or use filters as a last resort).
When the color of the picture is not too rich, please use png8 format regardless of whether there is transparency requirement. In most cases, this format is recommended.
When the picture has animation, only gif format can be used.
You can use tools to re-compress the image, but the prerequisite is that the color and transparency will not be affected.

Merging of multiple images:

There must be a gap between individual icons. The size of the gap is determined by the container size and display method. The advantage of this is that it takes into account "fault tolerance" and improves the maintainability of the image.
The arrangement of the icons is also determined by the container size and display method. The arrangement methods are divided into the following types: horizontal arrangement (container width is limited), vertical arrangement (container height is limited), diagonal arrangement (container width and height are not limited), left arrangement (container background is on the left), right arrangement (container background is on the left) right), horizontally centered arrangement (the container background is centered horizontally), vertically centered arrangement (the container background is centered vertically).
The size of the merged image should not exceed 50K, and the recommended size is between 20K-50K.
In order to ensure the quality of the image after multiple modifications, please keep a copy of the original PSD image, modify and add it in PSD, and finally export it as png.

Category merging:

It is not the best to merge all the icons into one picture. In addition to controlling the size of the picture, you should also pay attention to the following methods.

According to the arrangement of the pictures, merge the pictures in the same arrangement to facilitate style control.
Merge pictures belonging to the same module or component according to modules or components to facilitate the maintenance of modules or components.
According to the picture size, merge pictures of the same or similar size to make full use of the picture space.
Based on the color of the picture, merge pictures with the same or similar colors to ensure that the color of the merged picture is not too rich and prevent color distortion.
Merge based on the above methods.

Hack avoidance

When the cost of avoidance is high, you can use Hack instead of avoidance. For example, if you need to add a lot of HTML or write a lot more CSS, the gain will outweigh the gain. .
Rich practical experience can help you understand those common problems and use a variety of different ideas to avoid them, so experience and thinking methods are very important here.
Solve the Hack problem according to your own ability. We do not recommend that you use a method that you are not sure about to avoid Hack, because maybe your method itself has problems that you have not discovered.

If CSS can do it, don’t use JS

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

Use CSS to control interaction or visual changes, and JS only needs to change the className.
Use CSS to change the styles of multiple nodes at once to avoid multiple renderings and improve rendering efficiency.
If your product is not compatible with lower version browsers, then the animation implementation can be left to CSS.

Easy to read and modify

If you meet all the requirements of the "CSS specification", you will naturally write a beautiful CSS that is easy to read and modify.

Of course, code format and naming rules are relatively important.
Clear CSS module

If you meet the requirements of the naming rules, your CSS module will be clearly visible.

Using "comments" to describe each module is especially important for larger CSS files.
File Compression

Reasonable writing of CSS can reduce the file size to a great extent. After completion, try every means to compress your CSS without damaging the file content. You can use compression tools to remove comments, extra spaces, and newlines.

For details on compression tools, see: "HTML/CSS Tools" section.
Other format optimization

Please refer to the code format for optimization methods. http://www.cnblogs.com/LoveOrHate/p/4448833.html