CSS code optimization

The role of code optimization:

1. Compress code volume to improve authoring efficiency
2. Improves file access speed and facilitates fast compilation
3. Simplifies code, facilitates reuse, and facilitates later maintenance and expansion.

• Optimize code with inheritance

In CSS, child elements automatically inherit the parent element's property values, such as color, font, size, line spacing, and other typographic formats.

Such as:

a:link {

Color: #000000;

Text-decoration:none;

}

a:visited {

Text-decoration:none;

Color: #0000FF;

}

a:hover {

Text-decoration:none;

Color: #FF0000;

}

a:active {

Text-decoration:none;

Color: #00FF00;

}

Can be optimized to:

A

Text-decoration:none;

}

a:link {

Color: #000000;

}

a:visited {

Color: #0000FF;

}

a:hover {

Color: #FF0000;

}

a:active {

Color: #00FF00;

}

Note: In general, such as layout, display of box model properties, width, height, etc. only use their own property values, do not inherit ancestor elements.

Optimize your code with default values:

CSS properties are generally predefined default values, and if you define a property value that is the same as the default value, there is no need to repeat the definition.

Use the * number to define the default value.

Optimize code with public classes:

Such as:

span {

color:red;

font-size:14px;

}

#tips {

color:red;

width:100%;

}

. msg {

color:red;

font-size:12px;

Line-height:1.6em;

}

Can be simplified to:

span {

font-size:14px;

}

#tips {width:100%;}

. msg {

font-size:12px;

Line-height:1.6em;

}

. Red {

/*< define red public class >*/

color:red;

}

Called in the HTML tag: <div class= "msg Red" ></div>

To group optimization code with selectors:

Such as:

H1 {font-family: "Blackbody";}

H2 {font-family: "Blackbody";}

h3 {font-family: "Blackbody";}

h4 {font-family: "Blackbody";}

h5 {font-family: "Blackbody";}

h6 {font-family: "Blackbody";}

Can be optimized to:

H1,h2,h3,h4,h5,h6 {font-family: "blackbody"; }

Define a separate style:

H1,h2,h3,h4,h5,h6 {font-family: "blackbody"; }

h1 {font-size:20px;}

h2 {font-size:18px;}

h4 {font-size:12px;}

Optimize your code with cascading overrides:

If more than one style is defined on the same element, the CSS follows the nearest principle to apply the style in the same particular case, i.e. the same property declaration, and subsequent values overwrite the previous value.

Such as:

#title1, #title2, #title3 {

font-size:14px;

Font-weight:bold;

Text-align:center;

}

#title1 {color:blue;}

#title1 {color:red;}

#title1 {color:green;}

Can be optimized to:

#title1, #title2, #title3 {

font-size:14px;

Font-weight:bold;

Text-align:center;

Color:blue;

}

#title2 {color:red;}

#title3 {color:green;}

Code optimization considerations: In the optimization, the appropriate use of the nearest principle, in the same module to optimize, but some have global properties can be unified definition of content, such as Web page font, size, line spacing and so on.

CSS code optimization