How CSS style sheets do code compression

The function and significance of CSS code optimization

1, reduce the consumption of page bytes. Shorten the time that the browser downloads CSS code under the same conditions, which is equivalent to speed up the page opening

2, easy to maintain. Simplify and standardize CSS code to reduce CSS code for future maintenance

3, let oneself write the CSS code more professional.

CSS optimization Method-need to optimize CSS code place

1, abbreviated CSS code.

2, arrange the CSS code.

3, the same attribute extraction common CSS selector.

4, separate the page color and background settings (large sites need attention).

5, structured CSS code.

Example to explain the above points div CSS optimization method

1, abbreviated CSS Code

The common need to abbreviate CSS Property code is as follows:

Background (background attributes-css Manual for more information on background manual)

Before not optimized

Background-color: #FFF; corresponding property is white for background color
Background-image:url (divcss5.gif); corresponding property is set divcss5.gif picture as background
Background-position:bottom background picture is the bottom of the home
Background-repeat:repeat-x the background is repeated by x coordinate (horizontal axis).

The above CSS code can be abbreviated as

Background: #FFF URL (divcss5.gif) Repeat-x bottom;

Explanation: The background color is white, and the divcss5.gif image is repeated in x coordinates, and the icon is below. CSS Background property is not optimized

Margin (external filler property-css Manual for more information on margin manual)

Before not optimized

margin-left:5px; The meaning is left 5px
margin-right:6px; On the right 6px.
margin-bottom:7px; Bottom Stretch 7px
margin-top:8px; Top stretch of 8px

Optimization is abbreviated to

margin:8px 6px 7px 5px; The meaning and the attribute effect ditto, may understand the CSS margin introduction

Padding (inner filler attribute-css Manual for detailed understanding of padding manual)

Before not optimized

padding-left:5px; Meaning for the left filler 5px
padding-right:6px; Right filler 6px
padding-bottom:7px; Bottom (bottom) filler 7px
padding-top:8px; Top (upper) filler 8px

Optimization is abbreviated to

padding:8px 6px 7px 5px; The meaning and the attribute effect ditto, may understand the CSS padding introduction

Border (Border properties-css Manual for more information on border manual)

Before not optimized

Border-color: #000000; border color is black
Border-style:solid; border style is solid line
border-width:1px; border width is 1px

can be abbreviated to

border:1px solid #000000; previous not optimized

If you are setting only the left border to 1px, the solid line with black color CSS code is as follows

border-left:1px solid #000000;

Font (font properties-CSS Manual for more information on fonts manual)

The properties of the font are as follows:

Font-style:italic; Font style
Font-variant:small-caps; Font allogeneic
Font-weight:bold; Font Bold
font-size:12px; Word size is 12px
line-height:22px; Word line height is 22px
Font-family: "Bold" font for bold characters

can be abbreviated as one sentence: Font:italic small-caps bold 12px/22px "bold";

Note that if you abbreviate font definitions, you should at least define font-size and font-family two values to understand the CSS font tips.

Know what PX is

2, arrange the CSS code.

Usually our code is arranged as follows

This will take up a lot of CSS file space and back parking space, it also takes up 12 of lines of CSS file space

I suggest you rewrite it as

. yangshi{font-size:12px;border:1px Solid #000000;p adding:5px;
. yangshi2{font-size:12px;border:1px Solid #000000;p adding:5px;

This will save space and back parking, and the number of CSS file lines, thereby saving code file bytes.

3, the same attribute extraction common CSS selector.

This is to understand that if there are two parts of CSS properties such as width height font color is the same, and there is a very small difference, this time we need to extract the same CSS style, separate name a CSS property selector, thereby saving CSS code.

Such as:

. yangshi{font-size:12px;border:1px Solid #000000;p adding:5px; width:25px;}
. yangshi2{font-size:12px;border:1px Solid #000000;p adding:5px; width:50px;}

Here the Yangshi and yanshi2 two styles have the same font size of 12px, border same, inner filler same, only width is different, this time we can extract the same part of them and new CSS selector and reuse

The new CSS Property selector demonstrates the following

. gongyong{font-size:12px;border:1px solid #000000;p adding:5px;}
. yangshi{width:25px;}
. yangshi2{width:50px;}

So when you call CSS-Understand CSS Introduction

<div class= "Gongyong yangshi" >div CSS style </div>
<div class= "Gongyong yangshi2" >div CSS style 2</div>

This allows you to invoke the same CSS style, and then call the different CSS attribute classes separately, the above example does not show his merits, but if the code is more and there are many places such as the above features, this will show its functional characteristics.

4, separate the page color and background settings (large sites need attention).

This point has the 3rd of the same attribute extraction common CSS selector features, but the difference between the place, if the station is larger, you need to change a place can be changed the entire Site page font color style, background pattern color, border color style.

This time we will need to DIV+CSS development when the basic font style, background pattern color, border and other colors extracted together or into a CSS file, so that we maintain the management of the entire site basic style.

5, structured CSS code.

Structured CSS code means to sort the CSS code into categories, such as controlling the head, local, and bottom CSS code selector styles and separating them from the rest of the CSS code.

CSS code like the head is separated from the content area CSS code return lines

If the above "Toubu" and "Dibu" in line separated to distinguish, the advantage is easy to maintain later, easy to identify change maintenance.

DIV CSS Optimization

First, CSS style attributes word code simplified optimization

1, border (CSS border) shorthand:

1, 4 edge border width of 1px, color for #000

Border-color: #000; Border-style:solid; border-width:1px

can be abbreviated as:

border:1px solid #000;

2), single up, down, left, right box shorthand

Left:

Border-left-color: #000; Border-left-style:solid; border-left-width:1px

Shorthand:

BORDER-LEFT:1PX Solid #000

Right:

Border-right-color: #000; Border-right-style:solid; border-right-width:1px

Shorthand:

BORDER-RIGHT:1PX Solid #000

Top:

Border-top-color: #000; Border-top-style:solid; border-top-width:1px

Shorthand:

BORDER-TOP:1PX Solid #000

Below:

Border-bottom-color: #000; Border-bottom-style:solid; border-bottom-width:1px

Shorthand:

BORDER-BOTTOM:1PX Solid #000

3), technical shorthand border
Sometimes we can reduce the amount of code by just setting the border of 3 edges.
If we do not set the top border, and the other 3 sides for 1px to achieve a black border.

Legacy code:

DIV{BORDER-RIGHT:1PX solid #000 border-bottom:1px solid #000 border-left:1px Solid #000}

Shorthand:

div{border:1px solid #000; border-top:0}

This achieves the same effect and greatly reduces the amount of CSS code

Learn more about the CSS Border optimization compression tutorial.

2, padding (CSS padding) shorthand:

1), four edges set padding inside the filler property
Traditional thinking:

padding-left:2px; padding-right:3px; padding-top:4px; padding-bottom:5px

CSS padding can be abbreviated:

padding:4px 3px 5px 2px

2), only to 3 sides set padding
If we do not set padding on "Up", the other 3 edges set the Padding property

Traditional:

padding-left:2px; padding-right:3px; padding-bottom:5px

Shorthand:

padding:0 3px 5px 2px

3 sides the same situation:

Traditional:

padding-left:2px; padding-right:2px; padding-bottom:2px

Shorthand:

padding:0 2px 2px 2px;

3, margin shorthand

Margin is similar to the padding abbreviation

1), four edges spacing set abbreviation:
Traditional:

margin-left:2px; margin-right:3px; margin-bottom:5px; margin-top:4px;

Shorthand:

margin:4px 3px 5px 2px

2), four edges set distance of the same abbreviation
Traditional:

margin-left:2px; margin-right:2px; margin-bottom:2px; margin-top:2px;

Shorthand:

margin:2px

3), up and down the same, about the same

margin-left:2px; margin-right:2px; margin-bottom:5px; margin-top:5px;

Shorthand:

margin:5px 2px

4, background shorthand

Background-color: #000;

can be abbreviated to

Background: #000;

Background-image:url (picture address)

can be abbreviated as:

Background:url (picture address)

CSS backgrounds compare common style properties, including setting a separate background color, setting the background individually to a picture, setting the background picture individually, repeating it all, or repeating it vertically or horizontally with x or Y. Next we introduce the background background style commonly used shorthand and attention.

1) Background optimization for a single color setting

Background-color: #CCC

Optimized for:

Background: #CCC

2), background for the picture, x horizontal Repeat Tile

Background-image:url (/img201207/divcss5-logo-2012.gif);
background-position:0 0; Background-repeat:repeat-x

Shorthand:

Background:url (/img201207/divcss5-logo-2012.gif) repeat-x 0 0;

2), background for picture, Y repeat Tile

Background-image:url (/img201207/divcss5-logo-2012.gif);
background-position:0 0; Background-repeat:repeat-y

CSS abbreviated optimizations are:

Background:url (/images2012/logo.gif) repeat-y 0 0;

3), background for the picture, do not repeat the tile CSS compression

Background-image:url (/img201207/divcss5-logo-2012.gif);
background-position:0 0; Background-repeat:no-repeat

Shorthand:

Background:url (/img201207/divcss5-logo-2012.gif) no-repeat 0 0;

4, background for pictures, Web page full background x and Y repeat tile

Background-image:url (/img201207/divcss5-logo-2012.gif);

Simplified Merge:

Background:url (/img201207/divcss5-logo-2012.gif);

5), the background is black, the picture repeats to the x crosswise tile

Background-color: #CCC; Background-image:url (/img201207/divcss5-logo-2012.gif);
background-position:0 0; Background-repeat:repeat-x;

Simplified Merge:

Background: #CCC URL (/img201207/divcss5-logo-2012.gif) repeat-x 0 0;

Notice the color and the order of the pictures here.

5. Font Shorthand

font-size:12px; line-height:12px; Font-family:arial, Helvetica, Sans-serif;

can be abbreviated as:

font:12px/12px Arial, Helvetica, Sans-serif;

Ii. optimization of punctuation marks

1, remove extra space characters
We often write CSS code when CSS style words will be more than HTML space, we can develop CSS code, you can use the software to quickly remove extra space characters

CSS code optimization Word punctuation
Punctuation Character Space characters optimization

Example:

div{float:left; width:100px; height:100%;}

After removing a space:

div{float:left;width:100px;height:100%;}

CSS code after removing punctuation space
Remove the space to optimize the compressed CSS code

Remove space, in the development of the CSS process does not need to delete, only need to be completed after the development of the DW software, such as the bulk replacement to remove the extra space.

2, delete each selector last semicolon

Remove semicolons optimize CSS code
CSS code before removing semicolons

Code:

div{float:left;width:100px;height:100%;}
. divcss5{float:left;width:100px;height:100px;}

Abbreviated Delete semicolon compression:

div{float:left;width:100px;height:100%}
. divcss5{float:left;width:100px;height:100px}

CSS code optimization Compression remove the last attribute semicolon screenshot
Remove the last semicolon

Third, delete line wrap

Remove spaces and wrap, and let the code all squeeze together.

Screenshot before removing space
Delete the line break between the selector space screenshot

shorthand for removing selector wrap-in-line placeholder

CSS code:

div{float:left;width:100px;height:100%}
. divcss5{float:left;width:100px;height:100px}

Abbreviated abbreviation Optimization:

div{float:left;width:100px;height:100%}.divcss5{float:left;width:100px;height:100px}

Shorten byte optimization css after deletion
Short delete line, still can use DW software for operation deletion.

Four, CSS reuse optimization

Here the main introduction is the CSS code common attribute extraction to achieve saving code, maintenance convenience, CSS examples are as follows:

. yangshi_a{width:100px; height:20px; text-align:left; float:left; font-size:24px;
. yangshi_b{width:100px; height:20px; text-align:right; float:left; font-size:24px;

They all have the same height, width, float, text size, and only the content is left in the right different (you may need to know the CSS centered), we can extract their same attributes
After optimized compression:

Yangshi_a,. yangshi_b{width:100px; height:20px; text-align:left; float:left; font-size:24px;
. Yangshi_b{text-align:right;}

Note that the above code, you understand, do not understand the CSS forum to ask questions.

Five, CSS code optimization simplified Summary

Based on the above optimization, you can compress your CSS code, while reducing the need to occupy byte spaces, semicolons, by shorthand for common CSS code, such as greatly solve the compressed CSS code.