CSS code optimization solution

Function and significance of css code optimization

1. Reduce the usage of webpage bytes. Shortening the time for the browser to download css code under the same conditions is equivalent to accelerating the speed of opening a webpage.
2. easy to maintain. Simplify and standardize css code to reduce css code for future maintenance
3. Make your css code more professional.

Css Optimization Method

1. css code.
2. Arrange css code.
3. Shared css selector for same Attribute Extraction.
4. Separate the webpage color and background settings (pay attention to large websites ).
5. Organize css code.

Examples of the above div css Optimization Methods

1. css code

The commonly abbreviated css attribute code is as follows:

Background (background attribute)

Before Optimization

Background-color: # FFF; the background color is white.
Background-image: url(divcss5.gif); set divcss5.gif as the background
Background-position: bottom; the background image is at the bottom
Background-repeat: repeat-x; the background is repeatedly extended by X coordinates (abscissa ).

The preceding CSS code can be abbreviated

Background: # FFF url(divcss5.gif) repeat-x bottom;

Explanation: the background color is white, and the x is used to reproduce the divcss5.gif image, and the icon is hidden. The same as the css background attribute that has not been optimized

Margin (outer fill attribute)

Before Optimization

Margin-left: 5px; indicates 5px to the left.
Margin-right: 6px; 6px to the right
Margin-bottom: 7px; extending 7px at the bottom
Margin-top: 8px; 8px at the top

Short for Optimization

Margin: 8px 6px 7px 5px; meaning and attribute effect are the same as above

Padding (inner padding attribute)

Before Optimization

Padding-left: 5px, indicating 5px in left padding.
Padding-right: 6px; right fill 6 PX
Padding-bottom: 7px; bottom (bottom) Fill 7px
Padding-top: 8px; top (top) fill 8 PX

Short for Optimization

Padding: 8px 6px 7px 5px; meaning and attribute effect are the same as above

Border)

Before Optimization

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

Can be abbreviated

Border: 1px solid #000000; indicates the same as above. If you only set the left border to 1px before optimization, the solid-line css code with the color black is as follows:

Border-left: 1px solid #000000;

Font (font attribute)

The font attributes are as follows:

Font-style: italic; font style
Font-variant: small-caps; font-variant
Font-weight: bold; bold
Font-size: 12px; Word size: 12px
Line-height: 22px; the text line height is 22px
Font-family: "" font in bold

It can be abbreviated:

Font: italic small-caps bold 12px/22px "";

Note: If you are short for font definition, you must at least define the font-size and font-family values.

2. Arrange css code

The code is usually arranged as follows:

. Yangshi {
Font-size: 12px;
Border: 1px solid #000000;
Padding: 5px;
}
. Yangshi2 {
Font-size: 12px;
Border: 1px solid #000000;
Padding: 5px;
}

This will occupy a lot of spaces and parking space for css files. Here, 12 lines of css file space are occupied. www.phpernote.com suggests you rewrite it:

. Yangshi {font-size: 12px; border: 1px solid #000000; padding: 5px ;}
. Yangshi2 {font-size: 12px; border: 1px solid #000000; padding: 5px ;}
 
This saves space, parking space, and the number of css file lines, thus saving the code file bytes.

3. Shared css selector for same Attribute Extraction

It should be noted that if the css attributes of the two parts, such as the width and height, have the same font color, but there is a little difference, We need to extract the same css style, name a css attribute selector separately to save css code.
For example:

. Yangshi {font-size: 12px; border: 1px solid #000000; padding: 5px; width: 25px ;}
. Yangshi2 {font-size: 12px; border: 1px solid #000000; padding: 5px; width: 50px ;}
 
The yangshi and yanshi2 styles have the same font size as 12px, the border is the same, the inner padding is the same, and only the width is different, at this time, we can extract the same part of them and create a new css selector and reuse them to create a new css attribute selector. The demonstration is as follows:

. Gongyong {font-size: 12px; border: 1px solid #000000; padding: 5px ;}
. Yangshi {width: 25px ;}
. Yangshi2 {width: 50px ;}

In this way, when css is called

<Div class = "gongyong yangshi"> div css style </div>
<Div class = "gongyong yangshi2"> div css style 2 </div>

In this way, you can call different css attribute classes by calling the same css style. The above examples do not show their advantages. However, if there are many codes and there are many advantages such as the above, this will display its features.

4. Separate the webpage color and background settings (pay attention to large websites)

This is because the third point above shares the css selector feature with the same property extraction, but the difference is that if the site is large, you need to change the font color style and background pattern color of the entire site webpage, border color style. At this time, we need to extract the basic font style, background pattern color, border color, and other colors from the Development of div + css together or put them in a css file, in this way, we can easily maintain and manage the basic style of the entire site.

5. Organize css code

Organized css Code refers to organizing and classifying css code, such as controlling the css code selector styles in the header, part, and bottom, and separating them from other css codes. For example, the css code in the header is separated from the css code in the content area by entering the lines.

. Toubu {style content}
. Toubu. logo {style content}

. Dibu {style content}
. Dibu kuang {style content}

For example, the preceding "toubu" and "dibu" are separated by lines to facilitate future maintenance and identify changes and maintenance.

Divcss5 hopes to help you with the css optimization methods and css optimization solutions described in the above examples.

Articles you may be interested in

• Php programmers must know 40 PHP code optimizations
• How to accelerate windows 7 System Optimization
• How to optimize javascript code
• JS obtains the key code, how Js shields users' keys, and Js obtains the ASII code corresponding to users' keys (compatible with all browsers)
• QQ floating Customer Service Code, very easy to expand
• Precautions for css Performance Optimization
• JavaScript copy function code, compatible with multiple browsers
• 30 methods for optimizing SQL statement query in mysql